Skip to main content
se añadieron 290 caracteres en el cuerpo
Origen Enlace
neollob
  • 1.3k
  • 1
  • 6
  • 9
<!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''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>
<!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', () => { newL.style.display = 'none' });
            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', () => { clases[i].style.display = 'none' });
        }
        function mouseOver(arg) {
            arg.style.display = 'none';
        }
        boton.onclick = agregar;
    </script>
</body>

</html>
<!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>
Origen Enlace
neollob
  • 1.3k
  • 1
  • 6
  • 9

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', () => { newL.style.display = 'none' });
            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', () => { clases[i].style.display = 'none' });
        }
        function mouseOver(arg) {
            arg.style.display = 'none';
        }
        boton.onclick = agregar;
    </script>
</body>

</html>

En este caso no haria falta el uso del contador.