Estaba desarrollando un programa en JavaScript, cuando cada vez que se presiona el botón, la imagen debe alternar cada vez que se presiona; si actualmente es la imagen de "cuadro abierto", debe cambiar a la imagen de "cuadro cerrado". De manera similar, si es actualmente en cerrado, debería pasar a la "caja abierta". Sin embargo, estoy enfrentando un error de "invocación ilegal". ¿Cómo se puede resolver esto?
var jackbox = document.getElementById("jackbox"); function click() { if (this.id == "Jump out,Jack!") { document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg"; } else(this.id == "Jump out,Jack") { document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg"; } } document.getElementById("toggle").onclick = open; <div style="text-align: center; height: 280px;"> <img id="jackbox" src="https://www.paulneve.com/pp/jackbox-closed.jpg" /> <br/> <button id="toggle">Jump out, Jack!</button> </div> document.getElementById("toggle").onclick = open; debe ser document.getElementById("toggle").onclick = click; porque la función que desea ejecutar al hacer clic es la función de click .
Nota:
Como mencionó Dai en los comentarios, debería preferir usar
addEventListener. Como esto:document.getElementById("toggle").addEventListener("click", click);
This else(this.id == "Jump out,Jack") no es javascript inválido, en la declaración else no tiene que proporcionar una condición. Quite la condición o cambie else a else if . Como esto:
if (this.id == "Jump out,Jack!") { document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg"; } else { document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg"; }O
if (this.id == "Jump out,Jack!") { document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg"; } else if (this.id == "Jump out,Jack") { document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg"; } const jackbox = document.getElementById("jackbox"); function click() { if (this.id == "Jump out,Jack!") { document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg"; } else { document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg"; } } document.getElementById("toggle").addEventListener("click", click); <div style="text-align: center; height: 280px;"> <img id="jackbox" src="https://www.paulneve.com/pp/jackbox-closed.jpg" /> <br /> <button id="toggle">Jump out, Jack!</button> </div>