JavaScript - addEventListener no funciona al repetirse

   
Vista:

addEventListener no funciona al repetirse

Publicado por Alberto (5 intervenciones) el 28/08/2016 13:48:00
Hola a todos tengo un problema con un código que estoy probando. Quiero que desde el enlace "crear" al hacer clic sobre él se genere texto y además cambie el nombre del enlace a "borrar".

Después al hacer de nuevo click de nuevo sobre él me borre el texto anteriormente creado y que el enlace vuelva a llamarse "crear". Y así sucesivamente.

Prácticamente lo tengo, el problema es que sólo me lo hace una vez. La segunda vez que entra en la funcion crear ignora el addEventListner, y ya se quedará siempre en la funcion crear.

¿porqué la primera vez que entra en las funciones si va todo bien, pero luego ya no?


Muchas gracias, este es mi código

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<script>
 
	function crear() {
 
		document.getElementById('nombrediv').innerHTML = 'texto creado';
		enlace.innerHTML = 'borrar';
		enlace.addEventListener("click", borrar,false);
 
	}
 
 
 
	function borrar(){
		document.getElementById('nombrediv').innerHTML = '';
		enlace.innerHTML = 'crear';
		enlace.addEventListener("click",crear,false);
 
	}
 
 
</script>
</head>
 
<body>
 
 
	<div id='nombrediv'></div>
 
	<a id="enlace" href="#" onclick=crear();>Crear</a>
 
</body>
 
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

addEventListener no funciona al repetirse

Publicado por xve (1774 intervenciones) el 28/08/2016 20:09:30
Hola Alberto, para ello, tienes que eliminar previamente el evento antes de volver a asignarlo con removeEventListener()

prueba así:
1
2
3
4
5
6
7
8
9
10
11
12
13
function crear() {
	document.getElementById('nombrediv').innerHTML = 'texto creado';
	enlace.innerHTML = 'borrar';
	enlace.removeEventListener("click",crear,false);
	enlace.addEventListener("click", borrar,false);
}
 
function borrar(){
	document.getElementById('nombrediv').innerHTML = '';
	enlace.innerHTML = 'crear';
	enlace.removeEventListener("click",borrar,false);
	enlace.addEventListener("click",crear,false);
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

addEventListener no funciona al repetirse

Publicado por Alberto (5 intervenciones) el 28/08/2016 22:40:34
Muchisimas gracias, xve me ha funcionado y resultado.

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar