Javascript function for showing/hiding content of div on button click not working

Question

Javascript newbie here. This is basically what I'm working with.

The function below is intended to hide everything enclosed in the newsDisplay class, but nothing happens when clicking the button that calls it.

 function showHide() { var x = document.getElementsByClassName('newsDisplay'); if (x.style.display === 'none') { x.style.display = 'block'; } else { x.style.display = 'none'; } } 

 .newsDisplay { display: block; } 

 <h1>News<button onclick="showHide();"><img src="..\\Images\\showHide.png"></button></h1> <div class="newsDisplay"> <div class="bodyBox"> <h2>Diablo 3</h2> TEXT/PARAGRAPHS </div> </div> 

Manually changing display: block; to display: none; behaves exactly as expected, so either the syntax or logic of the function is incorrect, or something is preventing the function from executing when clicking the button.

Could really use some help, thank you!

Answer 1

Try the first element of this class as follows

    var x = document.getElementsByClassName('newsDisplay')[0];

Document document.single getElementsByClassName() will return an array of elements with the same class. It is different from document.getElementById() in so far as the latter returns a DOM object rather than an array of DOM objects.

Answer 2

As stated from it's name getElementsByClassName get elements (and not single element), so result of this function call is a collection of elements.

To access to first element of collection you can:

x = document.getElementsByClassName('newsDisplay')[0];
// or 
X = document.getElementsByClassName('newsDisplay').item(0);

Answer 3

You can try a loop if you want multiple of the page. The key is you're grabbing a list of elements with the class, since classes aren't unique identifiers. You can either use my code below or switch it to an id and grab it by document.getElementById. Notice the s in document.getElement s ByClassName

 var x = document.getElementsByClassName('newsDisplay'); function showHide() { for (var i = 0; i < x.length; i++){ x[i].style.display === 'none' ? x[i].style.display = 'block' : x[i].style.display = 'none'; } } 

 <h1>News<button onclick="showHide();"><img src="..\\Images\\showHide.png"></button></h1> <div class="newsDisplay"> <div class="bodyBox"> <h2>Diablo 3</h2> TEXT/PARAGRAPHS </div> </div> 

 <h1>News<button onclick="showHide();"><img src="..\\Images\\showHide.png"></button></h1> <div class="newsDisplay"> <div class="bodyBox"> <h2>Diablo 3</h2> TEXT/PARAGRAPHS </div> </div> 

Answer 4

Try the code below.

Use this

var x = document.getElementsByClassName('newsDisplay')[0];

  function showHide() { var x = document.getElementsByClassName('newsDisplay')[0]; if (x.style.display === 'none') { x.style.display = 'block'; } else { x.style.display = 'none'; } } 

 .newsDisplay { display: block; } 

 <h1>News<button onclick="showHide();"><img src="..\\Images\\showHide.png"></button></h1> <div class="newsDisplay"> <div class="bodyBox"> <h2>Diablo 3</h2> TEXT/PARAGRAPHS </div> </div> 

Answer 5

If you hit F12, navigate to the sources tab (on google chrome) you can set a breakpoint on your javascript function, your code is running, but you are getting a

Uncaught TypeError: Cannot read property 'display' of undefined

The reason for this is getElementsByClassName is returning a list of elements with that class selector, not just the one. If you want to just do this to the first element you can simply do:

function showHide() {
    var x = document.getElementsByClassName('newsDisplay')[0];
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}