Javascript onchangeイベントが機能しない

Question

このコードは、チェックボックスがオンになるまで選択入力フィールドを非表示にしようとしました。それは動作しますが、ページが最初にロードされると、これらはすべて表示されます。チェックボックスが表示されるまで、それらを非表示にする必要があります。ページを読み込み、チェックボックスをオフにしてオブジェクトが消えるチェックボックスをオフにすると、動作していることがわかりますが、なぜ始めに表示されますか？それはやっているから？

コード：

function doruc() { 
 
    var elem = document.getElementById("secondhalf1"), 
 
     checkBox = document.getElementById("pizza11"); 
 
    elem.style.display = checkBox.checked ? 'block' : 'none'; 
 
};

<input type="checkbox" id="pizza22" onclick="doruc()" name="halfHalf2" />

Answer 1

あなたは文書レディ状態の後にグローバルスコープでdoruc関数を呼び出すと、その関数を呼び出すことnoneにスタイルを設定します必要があります。

<script> 
    function doruc() { 
     var elem = document.getElementById("secondhalf1"), 
     checkBox = document.getElementById("pizza11"); 
     elem.style.display = checkBox.checked ? 'block' : 'none'; 
    }; 

    doruc(); 
</script> 

Answer 2

あなたの問題を解決できると思います。

if(pizza22) { 
    secondhalf1.style.display="none"; 
    } 
    pizza22.onchange = function() { 
     if(secondhalf1.style.display==="none") {secondhalf1.style.display="";} 
     else if(secondhalf1.style.display==="") {secondhalf1.style.display="none";secondhalf1}; 
    } 

JsFiddle：JavaScriptでIDのhttps://jsfiddle.net/x22ugdmm/1/

Answer 3

あなたの名前はあなたの要素に一致していません。 JavaScriptにはpizza11があり、入力タグにはpizza22があります。だからそれを見てください。 2つ目の理由は、関数を呼び出さなかったからです。

function doruc() { 
 
    var elem = document.getElementById("secondhalf1"), 
 
     checkBox = document.getElementById("pizza11"); 
 
    elem.style.display = checkBox.checked ? 'block' : 'none'; 
 
}; 
 
doruc();

<input type="checkbox" id="pizza11" onclick="doruc()" name="halfHalf2" />

それが動作します、これを試してみてください。