Получать innerText и использовать это как параметр в Javascript

Я делаю повестку дня, где добавив контакт, сохраняет в LocalStorage и производится div как следующий:

<div class="contacto">
    <h1 class="name">Juan </h1>
    <h2>Correo: @gmail.com</h2>
    <h2>Teléfono:12345</h2>
</div>

Чтобы удалять любой, я нуждаюсь в имени контакта для отсюда, получать Ваш index и мочь удалять это из localStorage; и он хотел, чтобы это произошло, дав click div контакта, который будет удален.

Тогда, когда я хочу удалить контакт, добавил все divs 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); });
 }
}

Где я распределяю ту же функцию каждому div, но с различным параметром, и с параметром "text" он получил бы текст этикетки h1 от div; однако всегда он возвращает мне последнее имя, например, если у меня есть 3 divs, возвращает мне имя последнего div, не имея значение, в котором он click. Он берет меня i как Ваша последняя стоимость во всех моих divs.

Кто-то знает, как решать это? Или им приходит в голову какой-то лучший способ это делать?

2
задан 09.11.2019, 03:12
1 ответ

ПРОБЛЕМА

Проблема estГЎ, в котором, реализовав цикл for, хотя он estГЎs aГ±adiendo одна funciГіn в событие click, стоимость переменной, которая получает потом ее funciГіn eliminarContacto(), которые ты выполняешь, когда Гєltimo кликает на div serГЎ стоимость, у которой есть text, выйдя из цикла.

Давайте Видеть:

var x = document.getElementsByClassName("contacto");
var y = document.getElementsByClassName("name");

for (var  i = 0; i < x.length; i++){
  var text = y[i].innerText;
  // text es una variable que va cambiando su valor a medida que se ejecuta el bucle
  console.log(text);
  x[i].addEventListener("click", function(){
    console.log(text); //<= cuando se hace clic, muestra el último valor que tenga la variable text
  });
}
<div class="contacto">
  <h2 class="name">Juan</h2>
  <h4>Correo: juan@email.com</h4>
  <h4>Teléfono:12345</h4>
</div>
<div class="contacto">
  <h2 class="name">Pedro</h2>
  <h4>Correo: pedro@email.com</h4>
  <h4>Teléfono:54321</h4>
</div>
<div class="contacto">
  <h2 class="name">Pablo</h2>
  <h4>Correo: pablo@email.com</h4>
  <h4>Teléfono:55555</h4>
</div>

SOLUCIГ “N

La soluciГіn простой, ты должен работать с this, которые harГЎ ссылка на элемент div внутри нее funciГіn, что ты перемещаешь как callback в событие клик. И он allГ - где ты будешь захватывать имя контакта, не раньше.

Ты cГіdigo podrГ, - чтобы быть видным следующей формы:

var contactos = document.getElementsByClassName('contacto');

for(var i = 0; i < contactos.length; i++) {
  // añadimos una función al evento click
  contactos[i].addEventListener('click', function(event) {
    event.preventDefault;
    // capturamos el nombre usando this, que hará referencia únicamente
    // al div sobre el que se hizo clic
    var nombre = this.getElementsByClassName('name')[0].innerText; // posición 0 => primer elemento (en teoría el único)
    console.log(nombre);
    // aqui ya puedes pasar el nombre a tu función eliminarContacto
    //eliminarContacto(nombre);
  });
}
<div class="contacto">
  <h2 class="name">Juan</h2>
  <h4>Correo: juan@email.com</h4>
  <h4>Teléfono:12345</h4>
</div>
<div class="contacto">
  <h2 class="name">Pedro</h2>
  <h4>Correo: pedro@email.com</h4>
  <h4>Teléfono:54321</h4>
</div>
<div class="contacto">
  <h2 class="name">Pablo</h2>
  <h4>Correo: pablo@email.com</h4>
  <h4>Teléfono:55555</h4>
</div>

Подсказка хорошей prГЎctica состоит в том, чтобы ты использовал имена mГЎs связные в твоих переменных, использовать sГіlo буквы - смущено:

var x = document.getElementsByClassName("contacto");
var y = document.getElementsByClassName("name");

понимает себя лучше, если мы делаем:

var contactos = document.getElementsByClassName("contacto"); // puede ser 0 o varios, por eso en plural.
var nombre = this.getElementsByClassName("name")[0].innerText; // aqui es singular, porque es 1 sólo nombre.

Надеялся, что это проясняет, твои сомнения.

0
ответ дан 01.12.2019, 12:13
  • 1
    Muchí пропасти Спасибо, если, что функционировал! я приму во внимание твою подсказку также; но я появляется сомнение ¿ Из-за qué использовать event.preventDefault()? ¿ Cuá l - событие, что está останавливая? – Ernesto Gutierrez 09.11.2019, 17:35
  • 2
    Это что-то почти automá костариканский, который я размещаю каждый раз, когда я работаю с формулярами и кнопками. Обычно botó n формуляра выполни событие submit из назначенного по умолчанию того же самого. Ты можешь снимать это, так как он не надо, не работали с формуляром. Это привычка для меня всегда размещать это, но не необходим. Привет – Mauricio Contreras 09.11.2019, 17:40
  • 3
    Мне радостно смочься помогать. Если он ты был ú til ты можешь принимать ответ как vá lida. Ты можешь читать ¿ Qué я должен делать, когда кто-то отвечает на мой вопрос? ;). Привет – Mauricio Contreras 09.11.2019, 19:13

Теги

Похожие вопросы