Este es mi código html :
<div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="mySwitch" name="emp"> <label class="form-check-label" for="mySwitch">EmpName</label> </div> Este es mi js :
var Switch = document.getElementById("mySwitch"); Switch.addEventListener("click",function(){ if(Switch.value=="yes") Switch.innerHTML="EmpNo"; else Switch.innerHTML="EmpName"; })No sé por qué el texto no está cambiando. ¿Podrías ayudarme?
Está seleccionando el elemento <input> , pero el que contiene el texto es el elemento <label> junto a la entrada.
const input = document.getElementById("mySwitch"); const label = input.nextElementSibling. Escuche el evento de change en la input en lugar de hacer clic. El evento de cambio se activará siempre que la entrada haya sido marcada o desmarcada y es más confiable para este caso.
Luego verifique la propiedad .checked en la entrada para ver si la casilla de verificación se ha marcado o no. En lugar de modificar la propiedad .innerHTML , use .textContent para establecer el texto modificado.
input.addEventListener('change' function() { if (input.checked) { label.textContent = 'EmpNo'; } else { label.textContent = 'EmpName'; } });