未捕获的TypeError：无法读取null的属性“样式”

Question

My code seems to have a problem that I don't know how to fix. I'm extremely new to this stuff and have almost no idea what I'm doing. Every time I run my code this error pops up. I'm trying to make when you click the button the blue box disappears. And when you click the button again the blue box reappears and the green box disappears. Here's my code:

<script type="text/javascript">
   function toggle_visibility(id1,id2){
   var e1 = document.getElementById(id1);
   var e2 = document.getElementById(id2);

   if (e1.style.visibility == 'hidden') {
      e1.style.visibility = 'visible';
      e2.style.visibility = 'visible';}
      else{
      e1.style.visibility = 'hidden';
      e2.style.visibility = 'hidden';
      }
      }
</script>
<div class="square" id="bluebox" style="visibility:visible"></div><br>
<div class="box" id="greenbox" style="visibility:visbible"></div><br>
<button onclick=" toggle_visibility(greenbox,bluebox)">Pls Work</button>

Answer 1

You need to add quotation marks to the arguments of the function:

<button onclick="toggle_visibility('greenbox','bluebox')">Pls Work</button>

They are not variables, they are strings.

Answer 2

You have to pass the id 's of both elements to the function as strings .

 function toggle_visibility(id1, id2) { var e1 = document.getElementById(id1); var e2 = document.getElementById(id2); if (e1.style.visibility == 'hidden') { e1.style.visibility = 'visible'; e2.style.visibility = 'visible'; } else { e1.style.visibility = 'hidden'; e2.style.visibility = 'hidden'; } } 

 .square, .box { height: 50px; width: 50px; visibility: hidden; } #greenbox { background-color: green; } #bluebox { background-color: blue; } 

 <div class="square" id="bluebox"></div> <br> <div class="box" id="greenbox"></div> <br> <button onclick="toggle_visibility('bluebox', 'greenbox')">Pls Work</button> 

Answer 3

The parameter id is not passed correctly from the HTML, you need to pass the ID correctly like onclick="toggle_visibility('greenbox','bluebox')"

Following code should work for you.

  function toggle_visibility(id1,id2){ var e1 = document.getElementById(id1); var e2 = document.getElementById(id2); if (e1.style.visibility == 'hidden') { e1.style.visibility = 'visible'; e2.style.visibility = 'visible';} else{ e1.style.visibility = 'hidden'; e2.style.visibility = 'hidden'; } } 

 <div class="square" id="bluebox" style="visibility:visible"></div><br> <div class="box" id="greenbox" style="visibility:visbible"></div><br> <button onclick="toggle_visibility('greenbox','bluebox')">Pls Work</button>