How to hide multiple elements in javascript?

Question

<!DOCTYPE html> 
<html> 

<head> 
   <title> 
       Hide or show HTML elements using 
       visibility property in JavaScript 
   </title> 

   <style> 
           .container { 
           height: 80px; 
           width: 250px; 
           border: 2px solid black; 
           background-color: green; 
           color: white; 
   </style> 
</head> 

<body> 
   <center> 
       <div class="container"> 
           <h1>Number of Child</h1> 
       </div> 

       <p class="container2"> 
           Click the buttons to show 
           or hide the green box 
       </p> 
 <input type="radio" id="female" name="gender" value="female"  onclick="showElement()"
        checked>
           <label for="female">Female</label>
        <label for="male">Male</label>
         <input type="radio" id="male" name="gender" value="male" onclick="hideElement()">  

   </center> 

   <script type="text/javascript"> 
       function showElement() { 
           element = document.querySelector(".container"); 
           element = document.querySelector(".container2"); 

           element.style.visibility = 'visible'; 
       } 

       function hideElement() { 
           element = document.querySelector(".container"); 
           element = document.querySelector(".container2"); 

           element.style.visibility = 'hidden'; 
       } 
   </script> 
</body> 

</html>

Okay so here's the simple code, I want to target 2 elements, which are : ".container"and ".container2"

but the method document.querySelector only choose one, how can I fix this ?

Link to the code : https://jsfiddle.net/7cgmq0tx/

querySelectorAll()?

Niet the Dark Absol
– Niet the Dark Absol

2020-01-25 23:49:55 +00:00
Commented Jan 25, 2020 at 23:49 — Niet the Dark Absol
– Niet the Dark Absol, Commented Jan 25, 2020 at 23:49
I've already try it, didn't worked out

Newbie
– Newbie

2020-01-25 23:52:12 +00:00
Commented Jan 25, 2020 at 23:52 — Newbie
– Newbie, Commented Jan 25, 2020 at 23:52

test_ · Accepted Answer · 2020-01-25 23:57:14Z

1

Second querySelector overrides first one, you should use two variables:

   <script type="text/javascript"> 
       function showElement() { 
           element1 = document.querySelector(".container"); 
           element2 = document.querySelector(".container2"); 

           element1.style.visibility = 'visible'; 
           element2.style.visibility = 'visible'; 
       } 

       function hideElement() { 
           element1 = document.querySelector(".container"); 
           element2 = document.querySelector(".container2"); 

           element1.style.visibility = 'hidden'; 
           element2.style.visibility = 'visible'; 
       } 
   </script>

answered Jan 25, 2020 at 23:57

test_

4163 silver badges11 bronze badges

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

1 Comment

Newbie Over a year ago

Oh yeah indeed, the solution was basic, thank you !

SenorCardgage · Accepted Answer · 2020-01-26 00:16:35Z

Because you are trying to make element equal something twice in the same block, javascript will instinctively make only the last one specified be true when the code is run. Which is why it only affects one element when you click the buttons. Try this instead:

function showElement() { 
           element = document.querySelector(".container"); 
           element2 = document.querySelector(".container2"); 

           element.style.visibility = 'visible';
           element2.style.visibility = 'visible';
       } 

       function hideElement() { 
           element = document.querySelector(".container"); 
           element2 = document.querySelector(".container2"); 

           element.style.visibility = 'hidden';
           element.style.visibility = 'hidden'; 
       }

Collectives™ on Stack Overflow

How to hide multiple elements in javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related