I have an input that when filled and sent creates a new line in a list with a class. In the function I create the line, its text, I associate them, I define the class.
I then want there to be an event where hovering over any of the lines defined with a class clears them.
I add a counter to put a limit to the loop for
and thus, from within, be able to create a local variable that contains all the classes and is defined each time the event occurs. But... It doesn't recognize the new classes! What is happening?
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>
As always thank you very much
Although every time you create an element (that is, it is dynamic) you must add to the event (with addEventListener ), this means that the code must repeat it. Recommendation
For option 2, called " event delegation ", so that the same "bubbles" in the whole branch of the element. Here is an example that I put together based on your code
The general part would be
As you can see it is added to the document , but it could be to the parent element list
I leave the complete code
I hope it helps or guides you.
The problem lies in the fact that the
for
one that goes through the elements with the classlinea
is executed only once (when loading the page), when you add new lines you are not assigning the event to themmouseover
and the loop has already been executed.You can assign the event when you create the new line:
newL.addEventListener('mouseover', () => { newL.style.display = 'none' });
your code would look like this:
In this case, the use of the counter would not be necessary.
New items you add don't have the event
mouseover
assigned to them. You can assign it in the functionagregar
to create the element itself. Here is your example working and commented:As you can see, the 'counter' variable no longer exists either, since it was not necessary to work with it since knowing the number of elements is only necessary on the first load.
I hope I could help you.