숨김 확인란에 변경 이벤트 추가

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>