[SOLUCIONADO] Editando el evento onClick de un button

[blancoarnau]

Hola a todos. Estoy trabajando en una aplicación que necesita mucho Javascript y, de repente, tuve un problema respecto el hecho de editar la función que llamaba el evento onClick de un button. Como me estaba estresando, decidí simplificarlo y hacer una prueba en un documento a parte mientras buscaba respuestas en diferentes páginas de internet pero no pude solucionar nada.

El primer script que escribí fue este:

Código Javascript:

function ejecutar1(){
        document.getElementById("boton").value="Adiós";
        document.getElementById("boton").onClick=ejecutar2;
}
function ejecutar2(){
        document.getElementById("boton").value="Hola";
        document.getElementById("boton").onClick=ejecutar1;
}
 

Pero después de buscar en internet pasé a este código pero tampoco funcionó:

Código Javascript:

function ejecutar1(){
        document.getElementById("boton").value="Adiós";
        document.getElementById("boton").removeAttribute("onClick");
        document.getElementById("boton").setAttribute("onClick",ejecutar2);
}
function ejecutar2(){
        document.getElementById("boton").value="Hola";
        document.getElementById("boton").removeAtrribute("onClick");
        document.getElementById("boton").setAttribute("onClick",ejecutar1);
}
 

También he probado con "addEventListener" pero tampoco funcionó. Por defecto, el button ejecuta la función "ejecutar1".

¿Alguien tiene alguna idea de cómo solucionarlo? Gracias :)

[PHPeros]

Mal de las dos formas.

onclick no se pone en camel case:

Código Javascript:

function ejecutar1(){
        document.getElementById("boton").value="Adiós";
        document.getElementById("boton").onclick=ejecutar2;
}
function ejecutar2(){
        document.getElementById("boton").value="Hola";
        document.getElementById("boton").onclick=ejecutar1;
}
 

En el el siguiente mezclas HTML con JavaScript. No puedes asociar un handler a un atributo de HTML, porque éste no lo interpreta. En tal caso, y a pesar de ser poco recomendado deberías cambiarlo por:

Código Javascript:

function ejecutar1(){
        document.getElementById("boton").value="Adiós";
        document.getElementById("boton").setAttribute("onclick","ejecutar2()");
}
function ejecutar2(){
        document.getElementById("boton").value="Hola";
        document.getElementById("boton").setAttribute("onclick","ejecutar1()");
}
 

Aunque finalmente deberías quedarte con addEventListener, que es el recomendado por la W3C:

Código Javascript:

function ejecutar1(){
        document.getElementById("boton").value="Adiós";
        document.getElementById("boton").addEventListener("click",ejecutar2,false);
}
function ejecutar2(){
        document.getElementById("boton").value="Hola";
        document.getElementById("boton").addEventListener("click",ejecutar1,false);
}
 

Saludos

[blancoarnau]

Gracias por contestar. Pues usaré addEventListener aunque no entiendo porque en la línea 3 has escrito "click" en vez de "onclick". Tampoco entiendo qué es un "handler".

Acabo de probarlo y no funciona del todo bien. Funciona los primeros tres clicks, pero después el botón se queda igual: http://jseditor.proyectosbds.com/oyiroz/1/edit

[PHPeros]

Iniciado por blancoarnau

Gracias por contestar. Pues usaré addEventListener aunque no entiendo porque en la línea 3 has escrito "click" en vez de "onclick". Tampoco entiendo qué es un "handler".

Acabo de probarlo y no funciona del todo bien. Funciona los primeros tres clicks, pero después el botón se queda igual: http://jseditor.proyectosbds.com/oyiroz/1/edit

Porque se excluye la parte on-, es decir, solo se pone el nombre del evento.

Un handler es un manejador del evento, una función.

Ahora que sabemos lo que quieres hacer, hay formas mejores de hacerlo:

[blancoarnau]

Muchas gracias. Era todo lo que necesitaba :)