Bildanzeige mit einer Checkbox umschalten

Question

Also versuche ich Code zu schreiben, der beim Ankreuzen der Checkbox aufhört, die Bilder auf meiner Website anzuzeigen. Ich erhalte keine Syntaxfehler in meiner Text-Software oder in der Konsole. Könnte mir jemand sagen, was das Problem mit diesem Code ist?

function Checkbox(element){ 
    var pic=document.getElementsByTagName("img"); 
if(element.checked==true){ 
    for(var i=0; i<pic.length; i++){ 
     pic[i].style.display="none"; 
    } 
} 
else if(element.checked==false){ 
    for(var i=0; i<pic.length; i++){ 
     pic[i].style.display="auto"; 
    } 
}}; 
//picDisplay is the id of my checkbox 
var picDisplay=document.getElementById("picDisplay"); 
picDisplay.addEventListener("click",Checkbox(picDisplay) 

Answer 1

Schauen Sie sich diese Geige: https://jsfiddle.net/yLb1xteu/

Das Hauptproblem im Code ist, dass Sie in einem Funktionszeiger auf die Checkbox Funktion in picDisplay.addEventListener übergeben müssen. Stattdessen führen Sie die Checkbox Funktion aus und übergeben das Ergebnis (im Grunde nichts) an addEventListener, das nicht viel tut.

Auch die Benennung einer Funktion Checkbox ist nicht die beste - nur werfen, dass da draußen. Möchte es so etwas wie togglePictures nennen. :)

Viel Spaß beim Programmieren!

Answer 2

Ich habe versucht, eine Probe von dem, was Sie suchen.

<input type="checkbox" id="picDisplay" onchange="Checkbox()" 
> 

<div style="width:10%;"> 
<img src="http://www.ricoh-imaging.co.jp/english/r_dc/caplio/r7/img/sample_04.jpg" style="width:100%;"> 
</div> 
<script> 
function Checkbox(){ 
var Checkbox_value = document.getElementById("picDisplay"); 
    var pic=document.getElementsByTagName("img"); 
if(Checkbox_value.checked==true){ 
    for(var i=0; i<pic.length; i++){ 
     pic[i].style.display="none"; 
    } 
} 
else if(Checkbox_value.checked==false){ 
    for(var i=0; i<pic.length; i++){ 
     pic[i].style.display="block"; 
    } 
}}; 
</script> 

Try the code given above and think this is helpful