Estoy tratando de hacer un tema oscuro/claro. Cuando hago clic para cambiar a la luz, la función se ejecuta. pero darken(); parece ser ignorado. ¿Me estoy perdiendo de algo? sin mensajes de error.
<label class="switch"> <input type="checkbox"> <span class="slider round" onclick="contrast();"></span> var m = 1 function lightup() { document.getElementById('header-wrap').style.backgroundColor = "white" } function darken() { document.getElementById('header-wrap').style.backgroundColor = 'black' } function contrast() { if (m = 1) { m = 2 lightup(); } else if (m = 2) { m = 1 darken(); } } contrast(); y lightup(); ambos disparan según lo previsto. darken(); no es.
La comparación de valores debe hacerse usando m === 1 o m == 1 . m = 1 es operador de asignación
violín de trabajo
var m = 1 function lightup() { document.getElementById('header-wrap').style.backgroundColor = "white" } function darken() { document.getElementById('header-wrap').style.backgroundColor = 'black' } function contrast() { if (m === 1) { m = 2 lightup(); } else if (m === 2) { m = 1 darken(); } } #header-wrap { width: 200px; height: 200px; border: 1px solid red; } <div id="header-wrap"></div> <label class="switch"> <input type="checkbox"> <span class="slider round" onclick="contrast();">Change</span> </label> Un mejor enfoque es hacer que la función se active en el evento de cambio de la casilla de verificación. Verifique el estado checked de la casilla de verificación y cambie el color de fondo.
violín de trabajo
const checkbox = document.getElementById('checkbox'); const element = document.getElementById('header-wrap'); function contrast() { element.style.backgroundColor = checkbox.checked ? "white" : 'black'; } #header-wrap { width: 200px; height: 200px; border: 1px solid red; } <div id="header-wrap"></div> <label class="switch"> <input type="checkbox" id="checkbox" onchange="contrast();"> <span class="slider round">Change</span> </label>