Javascript - イベントリスナーを確認

Question

私は自分のアプリケーションのボタンをトグルしています。

ボタンがオンになっていない場合は、値を1に設定し、値が1に設定されていない場合は値をnullにする必要があります。 （0 =非アクティブ、1 =有効）

私の現在のjavascriptのコードザッツ：

var checkbox = document.querySelector("input[name=checkbox]"); 

checkbox.addEventListener('change', function() { 
    if(this.checked) { 
     document.getElementById("activate").value = '1'; 
    } else { 
     document.getElementById("deactivate").value = '0'; 
    } 
}); 

そして、私のトグルボタンのthats：

<div class="toggle"> 
    <label> 
     <input id="CheckAcitavtion" name="checkbox" type="checkbox"> 
     <span class="slider"></span> 
    </label> 
</div> 

しかし、私はボタン切り替えの瞬間に次のエラーが表示されます：

Uncaught TypeError: Cannot set property 'value' of null at HTMLInputElement.

Answer 1

あなたが指摘したIDは存在しませんでしたので、私はgav eこの要素のspan要素。 <input>でない要素には、valueの代わりにinnerHTMLを使用する必要があります。

var checkbox = document.querySelector("input[name=checkbox]"); 
 

 
checkbox.addEventListener('change', function() { 
 
    if(this.checked) { 
 
     document.getElementById("checkValue").innerHTML = '1'; 
 
    } else { 
 
     document.getElementById("checkValue").innerHTML = '0'; 
 
    } 
 
});

<div class="toggle"> 
 
    <label> 
 
    <input id="CheckAcitavtion" name="checkbox" type="checkbox"> 
 
    <span id="checkValue">0</span> 
 
    </label> 
 
</div>