Estoy haciendo una agenda en donde al agregar un contacto, se guarda en el LocalStorage y se genera un div como el siguiente:
<div class="contacto">
<h1 class="name">Juan </h1>
<h2>Correo: @gmail.com</h2>
<h2>Teléfono:12345</h2>
</div>
Para eliminar cualquiera, necesito el nombre del contacto para de ahí, obtener su index y poder eliminarlo del localStorage; y quería que esto sucediera al darle click al div del contacto que se eliminará.
Entonces cuando quiero borrar un contacto, le agrego a todos los divs un eventListener:
function seleccionarContacto(){
var x = document.getElementsByClassName("contacto");
var y = document.getElementsByClassName("name");
for (var i = 0; i < x.length; i++){
var text = y[i].innerText;
x[i].addEventListener("click", function(){ eliminarContacto(text); });
}
}
Donde le asigno a cada div la misma función pero con un parámetro diferente, y con el parámetro "text" obtendría el texto de la etiqueta h1 del div; sin embargo siempre me devuelve el último nombre, por ejemplo, si tengo 3 divs, me devuelve el nombre del último div sin importar en cual le de click. Me está tomando i como su último valor en todos mis divs.
¿Alguien sabe como resolver esto? ¿O se les ocurre alguna mejor manera de hacerlo?