Help with showing/hiding HTML Divs with JavaScript?

Good morning,

I’m calling this function with a button:

function displayFORM() {
    alert("Yo.");
            document.getElementsByClassName("parent").getElementsByClassName("copyarea").getElementsByClassName("formFEEDBACK").style.display = "block";
        }

So, the alert goes off when I click the button. That’s how I know that my button is wired properly. I’m trying to show a hidden div (display none) by the class name of formFEEDBACK.

formFEEDBACK lives inside a div called copyarea, which lives inside a div called parent. Everything is classes, I’m not mixing ids in for simplicity’s sake

formFEEDBACK is not revealing itself on click. I’m missing something and I don’t know what it is. Any advice greatly appreciated.

Thanks,

– Mark

Why not use id tags and access the element directly getElementById. This way you get only one element. Using getElementsByClassName produces a list of items.

document.getElementById('formFEEDBACK').style.display = 'block'; // assigns a property of 'block' to the display property of the element with id 'formFEEDBACK'

If you insist on using getElementsByClassName and want a single element you have to call for it using its index, if you know what it is…

document.getElementsByClassName('formFEEDBACK')[0].style.display = 'block'; // if you are absolutely certain its the only element with this class name, its the 1st item of the list, aka index is 0.

If you want to reach multiple elements at the same time you will have to use the forEach method or for loop to assign styling to each item individually.

let elements = document.getElementsByClassName('className'); // gives you a list of elements

for (element of elements) {
   element.style.display = 'block'; // assigns display: 'block' to each element
}

Also, I suggest that instead of modifying a styling attribute that you add a class with a display property of block to the elements instead. And have their default display property set to none.

classList.add("show");

With the following class in your css

.show {
  display: block;
}
1 Like

You think not using IDs is making it simple for you?

Your call but not smart… If you have only one item you want things to happen with, use and ID tag. Especially if you want to do stuff with DOM manipulation…

1 Like

I appreciate your experience. I figured that classes would be just as easy to target as IDs, but you’ve shown me otherwise. As you can tell, I’m brand new to this sort of thing.

Thank you again for all of your help. :slight_smile:

1 Like

Sure anytime.

ID tag allows you to style and target a single DOM element
Classes allow you to style and target multiple DOM elements, however you need a for loop to manipulate each item after that.

You can mix those to your hearts content. And you can assign both an ID tag and (multiple) classes to the same html element.

But I use those with the following things in mind:

If I want the same styling applied to multiple elements I use a class.
If I have to style a single specific element I use an ID.

With interactivity in mind (DOM manipulation):
If you need something to happen to a single specific element, use their ID to target it.

On top of that I have another tip/hint:
If I want to manipulate styling with JavaScript, I keep the styling itself separated from the JavaScript by adding or removing classes. The class itself I can then define in the CSS.

Happy coding!

This topic was automatically closed 18 hours after the last reply. New replies are no longer allowed.