隠しチェックボックスに変更イベントを追加します

Question

変更イベントをキャッチしようとしていますが、少なくともチェックボックスでイベントをクリックしています。私はそれを "visibility：hidden"または "display：none"と読みましたが、イベントは発生しません。その後、私はラベルにeventListenerを追加するが、それはあまりにも動作していないようだ。仕事のやり方を理解できません。

document.addEventListener("DOMContentLoaded", function() { 
 
    var gameCount = document.getElementsByClassName("innerCount")[0]; 
 
    var checkLabel = document.querySelector("input[type=checkbox] + label"); 
 
    checkLabel.addEventListener("onclick", function() { 
 
    if (checkLabel.checked) { 
 
     gameCount.innerHTML = "--"; 
 
     console.log("turnOn"); 
 
    } else { 
 
     gameCount.innerHTML = ""; 
 
     console.log("turnOff"); 
 
    } 
 
    }) 
 
});

.checkbox > input[type=checkbox] { 
 
    visibility: hidden; 
 
} 
 
.checkbox { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 60px; 
 
    height: 30px; 
 
    border: 2px solid #424242; 
 
} 
 
.checkbox > label { 
 
    position: absolute; 
 
    width: 30px; 
 
    height: 26px; 
 
    background-color: #a50005; 
 
    cursor: pointer; 
 
} 
 
.checkbox > input[type=checkbox]:checked + label { 
 
    right: 28px; 
 
}

<div id="switcher"> 
 
    <span class="labels">ON</span> 
 
    <div class="checkbox"> 
 
    <input id="checkMe" type="checkbox"> 
 
    <label for="checkMe"></label> 
 
    </div> 
 
    <span class="labels">OFF</span> 
 
</div>

Answer 1

は、チェックボックスフィールドのchangeイベントリスナーを使用してください。

document.addEventListener("DOMContentLoaded", function() { 
    var gameCount = document.getElementsByClassName("innerCount")[0]; 
    var checkLabel = document.querySelector("input[type=checkbox]"); 
    checkLabel.addEventListener("change", function() { 
    if (checkLabel.checked) { 
     gameCount.innerHTML = "--"; 
     console.log("turnOn"); 
    } else { 
     gameCount.innerHTML = ""; 
     console.log("turnOff"); 
    } 
    }) 
}); 

Answer 2

addEventListeneronClickが存在しないからです。 clickで試してみてください：

document.addEventListener("DOMContentLoaded", function() { 
 
    var gameCount = document.getElementsByClassName("innerCount")[0]; 
 
    var checkLabel = document.querySelector("input[type=checkbox] + label"); 
 
    checkLabel.addEventListener("click", function() { 
 
    if (checkLabel.checked) { 
 
     console.log("turnOn"); 
 
    } else { 
 
     console.log("turnOff"); 
 
    } 
 
    }) 
 
});

.checkbox > input[type=checkbox] { 
 
    visibility: hidden; 
 
} 
 
.checkbox { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 60px; 
 
    height: 30px; 
 
    border: 2px solid #424242; 
 
} 
 
.checkbox > label { 
 
    position: absolute; 
 
    width: 30px; 
 
    height: 26px; 
 
    background-color: #a50005; 
 
    cursor: pointer; 
 
} 
 
.checkbox > input[type=checkbox]:checked + label { 
 
    right: 28px; 
 
}

<div id="switcher"> 
 
    <span class="labels">ON</span> 
 
    <div class="checkbox"> 
 
    <input id="checkMe" type="checkbox"> 
 
    <label for="checkMe"></label> 
 
    </div> 
 
    <span class="labels">OFF</span> 
 
</div>