チェックボックスを使用して画像表示を切り替える

Question

このチェックボックスをオンにすると、自分のウェブサイトに画像が表示されなくなるコードを記述しようとしています。テキストソフトウェアやコンソールに構文エラーが表示されません。このコードで問題が何であるか教えてもらえますか？

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

このフィドルをチェックアウト：https://jsfiddle.net/yLb1xteu/

あなたのコード内の主な問題は、あなたがpicDisplay.addEventListenerにCheckbox関数に関数ポインタを渡す必要があるということです。代わりに、Checkbox関数を実行して、結果を（基本的には何も）addEventListenerに渡します。これはあまり効果がありません。

また、関数Checkboxの名前を付けることも最高ではありません。ただそこに投げ込むだけです。それをtogglePicturesのような名前にしたいかもしれません。 :)

楽しいコーディングをお楽しみください！

Answer 2

私はあなたが探しているもののサンプルを試しました。

<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