HTML Collection - add class to first div

Question

I am using getElementsByClassName to select a single div by it's unique class name. For some reason, using querySelector is not working to select this div by it's unique class name, it returns "null."

I am trying to make this single div either display:none, add/remove a class, or just not be visible, I don't really care at this point. It's returning an HTML Collection, with the correct single div in it so length is 1, the div I want is at position 0. Every time I try to access this div from the collection, I'm getting null.

So this code:

let eleList = document.getElementsByClassName("CustomFormFieldQuestion_252145870712756");
console.log(eleList);
console.log(eleList.item(0));

Is returning to me this in the console:

HTMLCollection { length: 0 }
0: <div class="at-row at-row-full Custo…uestion_252145870712756">
length: 1
<prototype>: HTMLCollectionPrototype { item: item(), namedItem: namedItem(), length: Getter, … }
null

The div is it grabbing is the correct div; however, when I try to access it to either add a class or give it style.display = "none" all I get in the console is "null."

I have a list of about 10 items I need to grab by their unique class, hide them when the page initializes, then make them visible based on a checkbox response in a previous question.

I tried converting the HTML Collection to an Array and access it that way,

let arrayEleList = Array.from(eleList);

And it returned an empty array.

What am I doing wrong here, the initial eleList returns the correct div, but whenever I try to access it to do something I get "null."

Answer 1

// Get the element using querySelector
let ele = document.querySelector(".CustomFormFieldQuestion_252145870712756");

// Check if the element exists
if (ele) {
  // You have successfully selected the element
  // Now you can manipulate it as needed
  // For example, to hide the element:
  // ele.style.display = "none";
  // Or to add a class:
  // ele.classList.add("yourClassName");
} else {
  console.log("Element not found");
}

This code uses document.querySelector to select the first element with the specified class name. It then checks if the element exists, and if it does, you can proceed to manipulate it by changing its style.display or adding a class.

Answer 2

As document.getElementByClassName returns an array of all the elements with same class provided. Even if the class is unique it will be returned in an array.

In order to grab it you can do this

let elements = document.getElementByClassName("your classname here")

elements.forEach((elem, index) => {
    console.log(`index number = ${index} and element = ${elem}`)
})

Check the console it will print like

index number = 0 and element = the element of that className

Note that index number and use like this...

let elements = document.getElementByClassName("your classname here")

let index = 0 // replace the index number shown in previous code

console.log(elements[index])

Now you can go on.

If you have a unique class then you can use querySelector

make sure there is no other element of same class. If there is multiple element with same class then it will return the first element in html with that class and other elements will be ignored. If you wanna access all elements then you can use querySelectorAll.

Remember using querySelector will not provide any suggestions if you are using VS Code.

let elem = document.querySelector(".CustomFormFieldQuestion_252145870712756")

// Now you can do manipulation on it like here

elem.style.display = "none"

If you still get the undefined error that means that either classname is wrong or HTML DOM is not loaded properly.

If any more error then provide full code for proper solution.