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!

Ah, apologies, I missed it when copy-pasting. It's there in the actual code. — Conor Busse
– Conor Busse, Commented Jul 30, 2017 at 21:17

Jarek Kulikowski · Accepted Answer · 2017-07-30 21:22:16Z

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.

edited Jul 30, 2017 at 21:22

answered Jul 30, 2017 at 21:18

Jarek Kulikowski

1,3898 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Conor Busse Over a year ago

Yes! That did it, thank you! Would you (or anyone else) be able to explain what's happening there?

Obsidian Age Over a year ago

To elaborate, document.getElementsByClassName() returns a NodeList collection of elements, as you can have more than one element that has the class. The [0] means that you're attempting to access the first index of that NodeList; the first element in the DOM that has that class :)

u_mulder · Accepted Answer · 2017-07-30 21:20:26Z

0

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);

answered Jul 30, 2017 at 21:20

u_mulder

54.8k5 gold badges54 silver badges72 bronze badges

1 Comment

Conor Busse Over a year ago

I see, very informative answer, thank you! The code is works when adding [0].

Win · Accepted Answer · 2017-07-30 21:22:24Z

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.getElementsByClassName

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>

Kamran Jabbar · Accepted Answer · 2017-07-30 21:23:13Z

0

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>

answered Jul 30, 2017 at 21:23

Kamran Jabbar

8781 gold badge8 silver badges21 bronze badges

Comments

JosephStevens · Accepted Answer · 2017-07-30 21:29:46Z

0

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';
    }
}

answered Jul 30, 2017 at 21:29

JosephStevens

1,7061 gold badge15 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related