Estoy tratando de hacer que un interruptor cambie el color de fondo de un div usando classList.toggle, pero no funciona y no sé por qué, aunque probablemente sea muy simple. ¿Alguien puede aclararme esto, por favor?
var toggle = document.getElementById('switch') toggle.onclick = function() { document.getElementById('testDiv').classList.toggle('test') } #testDiv { width: 250px; margin: auto; margin-top: 16px; background-color: white; } .test { background-color: black !important; } <label class="switch" id="switch" onclick="myFunction()"> <input type="checkbox"> <span class="slider round"></span> </label> <div id="testDiv"> <p> plain text </p> </div>Puede llamar a myFunction cuando el usuario hace clic en la casilla de verificación. Se corrigió el archivo CSS para colocar !important en la posición correcta.
function myFunction(){ document.getElementById('testDiv').classList.toggle('test'); } #testDiv { width: 250px; margin: auto; margin-top: 16px; background-color: white; } .test { background-color: black !important; color: white; } <label class="switch" id="switch" for="change_bg">Change background</label> <input type="checkbox" id="change_bg" onclick="myFunction()"> <div id="testDiv"> <p> plain text </p> </div>