[Resuelto] javascript. Código sencillo no funciona. addEventListener a botones.

Iniciado por @XSStringManolo, 29 Diciembre 2019, 19:17 PM

0 Miembros y 2 Visitantes están viendo este tema.

@XSStringManolo

Un botón no va, y el otro sí. Los creo de la misma manera.
Pensé que era algún error relacionado con que ambos botones hacen referencia al mismo objeto en memoria, pero comenté el botón que va y la llamada a la funciòn que lo crea y sigue sin ir el primer botón.
A ver si alguien sabe por qué. Ni tengo ni la más mínima idea de que pasa.
Código (javascript) [Seleccionar]
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<script>
"use strict";
function crearElemento(etiqueta, IDpadre, tipo, valor, id, nombre, fuente, clase, pista, enClick, dentro, retorno)
{

if(!etiqueta)
throw new SyntaxError("El parámetro etiqueta está sin definir.");

if(!IDpadre)
throw new SyntaxError("El parámetro padre está sin definir.");

var elemento = document.createElement(etiqueta);
elemento.type = tipo;
elemento.value = valor;
elemento.id = id;
elemento.name = nombre;
elemento.src = fuente;
elemento.class = clase;
elemento.placeholder = pista;
elemento.onclick = enClick;
elemento.innerHTML = dentro;

document.getElementById(IDpadre).appendChild(elemento);

  if(retorno === true)
  {
  return elemento;
  }

}

function añadirEtiqueta(idPadre, etiqueta)
{
document.getElementById(idPadre).innerHTML += etiqueta;
}

/* Constantes */
var body="body", input="input", text="text", no="", button="button", si = true;
</script>

<script>
"use strict";
function CrearWeb()
{
añadirEtiqueta(body, "Dominios:<br />");

var i = 1;
var ejemplo="https://example.com/";

var dominio1 = crearElemento(input, body, text, no, "dominio"+i, "dominio"+i, no, no, ejemplo, no, no, si);

var botonAgregarDominio1 = crearElemento(button, body, button, no, "botonAgregarDominio"+i, "botonAgregarDominio"+i, no, no, no, no, "+", si);

añadirEtiqueta(body, "<br />");

var Diccionario1 = crearElemento(input, body, text, no, "diccionario"+i, "diccionario"+i, no, no, ejemplo+"lista.txt", no, no, si);

var botonAgregarDiccionario1 = crearElemento(button, body, button, no, "botonAgregarDiccionario"+i, "botonAgregarDiccionario"+i, no, no, no, no, "+", si);

botonAgregarDiccionario1.addEventListener("click", function(){alert("test2");});

/* ESTE NO VA */
botonAgregarDominio1.addEventListener("click", function(){alert("test1");});

}
</script>
</head>
<body id="body" onload="CrearWeb();">
</body>
</html>

MinusFour

Porque cuando haces:

Código (javascript) [Seleccionar]

añadirEtiqueta(body, "<br />");


Te cargas todo el body y lo recreas de nuevo. Modificar el innerHTML significa que el navegador va a parsear todo el HTML de ese elemento y substituir todos los elementos en el DOM hijos de ese elemento por los nuevos.

@XSStringManolo

Cita de: MinusFour en 29 Diciembre 2019, 22:26 PM
Porque cuando haces:

Código (javascript) [Seleccionar]

añadirEtiqueta(body, "<br />");


Te cargas todo el body y lo recreas de nuevo. Modificar el innerHTML significa que el navegador va a parsear todo el HTML de ese elemento y substituir todos los elementos en el DOM hijos de ese elemento por los nuevos.
Andaaaaa! No se me olvida en la vida. Crack!