0

I am trying to add a class to an element that I select like this:

const element = document.getElementsByClassName('some class names')

If I console.log this element (console.log('element?', element), I get a collection of HTML elements; but if I console.log one element (console.log('element[0]?', element[0])), it's undefined.

Does anyone know why I can't access an element from that collection?

enter image description here

const legendSymbol = document.getElementsByClassName("esri-legend__layer-cell--symbols")
legendSymbol[0].classList.add('hidden')
Maxime
  • 337
  • 2
  • 17
  • Why do you need to use `getElementsByClassName` in the first place? In Vue, you could apply it dynamically using some conditional state. Otherwise, the usage of [template $refs](https://stackoverflow.com/a/68257167/8816585) is the way to go in a Vue context. Also, please show how you access the collection itself, not just a screenshot. – kissu May 23 '22 at 17:36
  • Basically I am trying to hide (by adding a class `hidden`) an element in a legend provided by ArcGIS. I am not making this element therefore can't really control it. – Maxime May 24 '22 at 18:06
  • 1
    You can still target it by using a `template $ref` AFAIK. – kissu May 24 '22 at 19:23
  • This is true. I have done it but it seems that I can only reach to a certain level of nesting. I have asked a new question about that here https://stackoverflow.com/questions/72375568/in-a-nuxt-application-console-logging-beyond-a-certain-level-of-nesting-returns – Maxime May 25 '22 at 10:04

0 Answers0