Uncaught TypeError: Kann die Eigenschaft 'style' von null nicht lesen

Question

Mein Code scheint ein Problem zu haben, von dem ich nicht weiß, wie ich es beheben kann. Ich bin extrem neu in diesem Zeug und habe fast keine Ahnung, was ich mache. Jedes Mal, wenn ich meinen Code starte, erscheint dieser Fehler. Ich versuche zu machen, wenn Sie auf den Knopf klicken, verschwindet die blaue Box. Und wenn Sie erneut auf die Schaltfläche klicken, erscheint die blaue Box wieder und die grüne Box verschwindet. Hier ist mein 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

Sie müssen Anführungszeichen auf die Argumente der Funktion hinzuzufügen:

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

Sie sind keine Variablen, sind sie Strings.

Answer 2

Sie müssen die id von beiden Elementen an die Funktion Strings übergeben.

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

Der Parameter id nicht korrekt aus dem HTML übergeben wird, müssen Sie korrekt die ID passieren wie onclick="toggle_visibility('greenbox','bluebox')"

Code Nach sollte für Sie arbeiten.

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>