7

Tengo un input que al rellenarlo y enviarlo crea una nueva línea en una lista con una clase. En la función creo la línea, su texto, los asocio, le defino la clase.

Luego quiero que exista un evento en el que, al pasar por encima de cualquiera de las líneas definidas con una clase, se borren.

Añado un contador para poner un límite al bucle for y así, desde dentro, poder crear una variable local que contenga todas las clases y se defina cada vez que sucede el evento. Pero... No reconoce las clases nuevas! ¿Qué está ocurriendo?

var lista = document.getElementById('lista');
var texto = document.getElementsByTagName('input')[0];
var boton = document.getElementById('boton');
var contador = 3;

function agregar() {
  let item = texto.value;
  let newL = document.createElement('li');
  newL.classList.add('linea');
  let newT = document.createTextNode(item);
  lista.appendChild(newL);
  newL.appendChild(newT);
  contador++;
}


for (let i = 0; i < contador; i++) {
  let clases = document.getElementsByClassName('linea');
  clases[i].addEventListener('mouseover', function() {
    this.style.display = 'none';
    contador--;
  })
}

boton.onclick = agregar;
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <form action="">
    <input type="text">
    <button id="boton" type="button">
      agregar
    </button>
  </form>

  <div id="bloque" style="width: 20%;">
    <ul id="lista">
      <li class="linea">Tomates</li>
      <li class="linea">Habichuelas</li>
      <li class="linea">Arroz</li>
    </ul>
  </div>
</body>

</html>

Como siempre, muchas gracias

2
  • No entiendo muy bien lo que quieres, ¿podrías reformular tu pregunta de otra forma? Commented el 1 nov. 2019 a las 23:43
  • Hola Daniel, gracias por tu respuesta. Lo que quiero es que al pasar el ratón sobre las Li desaparezcan. Las Li tienen class:linea;. Y mi problema es que solo reaccionan ante el evento las que se hayan creado previamente. No las que se han creado de forma dinámica Commented el 3 nov. 2019 a las 0:03

3 respuestas 3

10
+50

Si bien cada vez que creas un elemento (o sea es dinámico) debes agregar al evento (con addEventListener), esto hace que el codigo debas repetirlo. Recomendacion

  • OPCION 1: Encapsular en un método de agregar al evento (para no repetir código)
  • OPCION 2: (recomendación) realizar un evento mas genera, para detectar elementos dinámicos (es agregar el evento a un elemento mas general el documento mismo o la lista)

Para la opción 2, llamada "delegación de evento", para que el mismo "burbujee" en toda la rama del elemento. Aquí un ejemplo que arme en base a tu código

La parte general seria

document.addEventListener('mouseover',function(e){        
      if(e.target && e.target.className == 'linea'){
          e.target.style.display = 'none';
        }
    });

Como veras se agrega al document, pero podria ser al elemento padre lista

lista.addEventListener('mouseover',function(e){        
      if(e.target && e.target.className == 'linea'){
          e.target.style.display = 'none';
        }
    });

Dejo el código completo

var lista = document.getElementById('lista');
var texto = document.getElementsByTagName('input')[0];
var boton = document.getElementById('boton');

function agregar() {
  let item = texto.value;
  let newL = document.createElement('li');
  newL.classList.add('linea');

  let newT = document.createTextNode(item);
  lista.appendChild(newL);
  newL.appendChild(newT);
}


lista.addEventListener('mouseover',function(e){        
  if(e.target && e.target.className == 'linea'){
    e.target.style.display = 'none';
  }
});

boton.onclick = agregar;
    <form action="">
        <input type="text">
        <button id="boton" type="button">
            agregar
        </button>
    </form>

    <div id="bloque" style="width: 20%;">
        <ul id="lista">
            <li class="linea">Tomates</li>
            <li class="linea">Habichuelas</li>
            <li class="linea">Arroz</li>
        </ul>
    </div>

Espero que te sirva de ayuda o guía.

1
  • Muchas Gracias! Commented el 9 nov. 2019 a las 13:43
3

El problema radica en el hecho que el for que recorre los elementos con la clase linea se ejecuta una sola vez (al cargar la pagina), cuando añades lineas nuevas no les estas asignando el evento mouseover y el bucle ya se ha ejecutado.

Puedes asignar el evento cuando creas la linea nueva:

newL.addEventListener('mouseover', () => { newL.style.display = 'none' });

tu codigo quedaria asi:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <form action="">
        <input type="text">
        <button id="boton" type="button">
            agregar
        </button>
    </form>

    <div id="bloque" style="width: 20%;">
        <ul id="lista">
            <li class="linea">Tomates</li>
            <li class="linea">Habichuelas</li>
            <li class="linea">Arroz</li>
        </ul>
    </div>

    <script>
        var lista = document.getElementById('lista');
        var texto = document.getElementsByTagName('input')[0];
        var boton = document.getElementById('boton');

        function agregar() {
            let item = texto.value;
            let newL = document.createElement('li');
            newL.classList.add('linea');
            newL.addEventListener('mouseover', () => { 
              setInterval(function(arg){ 
                newL.style.display = 'none';
              }, 1000);});
            let newT = document.createTextNode(item);
            lista.appendChild(newL);
            newL.appendChild(newT);
        }


        let clases = document.getElementsByClassName('linea');
        for (let i = 0; i < clases.length; i++) {
            clases[i].addEventListener('mouseover', () => { 
              setInterval(function(arg){ 
                clases[i].style.display = 'none' ;
              }, 1000);});
        }
        function mouseOver(arg) {
            setInterval(function(arg){ 
              arg.style.display = 'none'; 
            }, 1000);
            
        }
        boton.onclick = agregar;
    </script>
</body>

</html>

En este caso no haria falta el uso del contador.

2
  • Con este ejemplo, al hacer hover, se ocultan todos los "li". Commented el 7 nov. 2019 a las 21:40
  • 1
    En realidad no es así Camilo, he puesto unos intervalos de 1s para que se vea el efecto mas lento y corroborar que se ocultan individualmente. Saludos
    – neollob
    Commented el 10 nov. 2019 a las 19:44
0

Los elementos nuevos que agregas no tienen el evento mouseover asignado. Puedes asignarselo en la función agregar al mismo crear el elemento. Aquí tienes tu ejemplo funcionando y comentado:

var lista = document.getElementById('lista');
var texto = document.getElementsByTagName('input')[0];
var boton = document.getElementById('boton').onclick = agregar;;

// Solo se ejecuta en la primera carga, por lo que los únicos afectados serán los elementos ya existentes de inicio pero los nuevos no.
for (let i = 0; i < lista.childElementCount; i++) {
let clases = document.getElementsByClassName('linea');
    asignarEvento(clases[i]);
}

// Asignamos el evento "mouseover" en el elemento agregado.
function agregar() {
    let newL = document.createElement('li');
    newL.classList.add('linea');
    let newT = document.createTextNode(texto.value);
    lista.appendChild(newL);
    newL.appendChild(newT);
    asignarEvento(newL);
}

// Creamos una función encargada de asignar el evento a un elemento para no repetir código, ya que es llamado en 2 ocasiones: en la primera carga y trás cada elemento agregado.
function asignarEvento(elemento) {
    elemento.addEventListener('mouseover', function() {
        this.style.display = 'none';
    })
}

Como puedes ver ya no existe tampoco la variable ´contador´ puesto que no era necesario trabajar con ella ya que conocer el número de elementos solo es necesario en la primera carga.

Espero haberte podido ayudar.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.