Tengo un botón que muestra un texto determinado al principio, pero cuando hago clic en él, me gustaría que mostrara algo más.
Aquí está la entrada html:
<label class="button"> <input type="checkbox" id="control" onchange="changeState();"> <span class="button1" style="color: #4CAF50">Pull</span> </label>y aquí está mi función:
function changeState() { if (active == false) { active = true; start_timer(); var myStop = "Stop" document.getElementById("control").innerHTML = myStop.fontcolor("#f00"); } else { active = false; var myPull = "Pull" document.getElementById("control").innerHTML = myPull.fontcolor("#4CAF50"); } } Cuando usaba <button></button> en lugar de <input> solía funcionar, pero necesito usar la entrada para otra cosa. ¿Alguna idea de lo que tendría que cambiar para que funcione? Soy realmente nuevo en HTML y JavaScript, así que no tengo ni idea en este momento.
la entrada es solo una casilla de verificación. Como se mencionó, no hay innerHTML. Es el intervalo que desea cambiar.
let button = document.getElementById('button1') function changeState() { let checked = document.getElementById('control').checked if (checked) { let myStop = "Stop" button.innerText = myStop; button.style.color='red' }else{ let myPull = "Pull" button.innerText = myPull; button.style.color="#4CAF50"; } } <label class="button"> <input type="checkbox" id="control" onchange="changeState();"> <span id="button1" style="color: #4CAF50">Pull</span> </label>Aquí hay una solución sin el lapso:
function changeState(e) { if (e.target.checked) { e.target.nextElementSibling.style.color = "#f00" e.target.nextElementSibling.textContent = "Stop" } else { e.target.nextElementSibling.style.color = "#4CAF50" e.target.nextElementSibling.textContent = "Pull" } } document.querySelector("#control").onchange = changeState; <input type="checkbox" id="control" name="control"> <label for="control" class="button" style="color: #4CAF50"> Pull </label> Es posible que desee ir más allá y usar una clase y classList.toggle() para manejar el color de fuente.