прикрепление обработчика событий к целым алфавитам или только к одному - PullRequest
Новая
       11

прикрепление обработчика событий к целым алфавитам или только к одному

0 голосов
/ 29 октября 2019
  • Я перебрал массив фруктов с помощью метода map и отобразил эти элементы в браузере.
    • но при каждом щелчке фруктов мне нужно отображать соответствующее предупреждение с названием фруктов a соответственно
    • , но теперь в моем щелчке я вижу только a, а когда я нажимаю алфавит b, он должен b
    • мне нужно прикрепить обработчик событий для каждого алфавита
    • Можете ли вы сказать мне лучший подход для решения этой проблемы
    • , предоставив мой фрагмент кода и песочницу ниже. 

function sampleFunction() {
  let fruits = ["a", "b", "c", "d", "e", 'f', "g"];
  var fruitsElement = document.getElementById('fruits1');

  fruits.map(item => {
    console.log("item--->", item);
    fruitsElement.innerHTML += item
    return item;
  });

  /*  var fruitsElement = document.getElementById('fruits1');
   for (var i = 0; i < fruits.length; i++) {
     fruitsElement.innerHTML += fruits[i];
   } */

}

function fruitsClick() {
  alert("I am fruit a");
}
body {
  background-color: #1d2126;
  color: white;
}
<h1>Hello, World</h1>

<button onclick="sampleFunction()">test</button>
<h1 onclick="fruitsClick()" id="fruits1"> </h1>

1 Ответ

0 голосов
/ 29 октября 2019

Создайте отдельные пролеты для каждого названия фрукта. fruitsClick() может затем проверить, на каком интервале вы щелкнули, и получить его текстовое содержимое. 

function sampleFunction() {
  let fruits = ["a", "b", "c", "d", "e", 'f', "g"];
  var fruitsElement = document.getElementById('fruits1');

  fruits.forEach(item => {
    console.log("item--->", item);
    fruitsElement.innerHTML += `<span class="fruit">${item}</span>`;
  });
}


function fruitsClick(e) {
  e.stopPropagation(); // prevent bubbling from <span> to <h1>
  let fruit = e.target.innerText;
  alert("I am fruit " + fruit);
}
body {
  background-color: #1d2126;
  color: white;
}
<h1>Hello, World</h1>

<button onclick="sampleFunction()">test</button>
<h1 onclick="fruitsClick(event)" id="fruits1"> </h1>
...