В чем ошибка данного способа?

Question

[webjun]

Увидел на одном собесе маленькое задание и решил для себя его повторить:
У нас есть список с разными лишками и в каждой из них хранится какой-то текст, мне при клике на ли нужно чтоб в отдельный див выводился текст из этой ли:

<ul>
		<li>Apple</li>
		<li>Pear</li>
		<li>Orange</li>
	</ul>

<div class="result">
		<h4></h4>
	</div>

const ul = document.querySelectorAll('ul'),
      result = document.querySelector('h4');

const showFn = (e) => {
	const curEl = e.currentTarget;
	result.innerHTML = curEl;
}

ul.forEach(elem => elem.addEventListener('click', showFn))

В чем моя ошибка ?

Comments

[nonconformiste]

А где такие вакансии с такими тестами?)

[webjun]

nonconformiste, собес на трейника)

Answer 1

[nonconformiste]

Comments

[nonconformiste]

Цель почему то в скрипте ul, когда надо li. В результат летел весь объект цели, а не innerHTML. вот и все

[webjun]

nonconformiste, спасибо

[SagePtr]

nonconformiste, можно и на ul повесить обработчик, но отлавливать не e.currentTarget, а e.target. При таком подходе - при добавлении новых элементов в список не придётся в каждый отдельно добавлять обработчик.

[nonconformiste]

SagePtr, можно так и на body повесить и фильтровать цель по тегу))

[SagePtr]

nonconformiste, это уже другая крайность - он так будет срабатывать на каждый клик)

[Everything_is_not_so_bad]

Как же приятно видеть, когда люди могут сделать что-то без реактивных фреймворков!

[nonconformiste]

Román Mirilaczvili, Это как бы база. Based. Это вот база. Потому что это — основа, это, так сказать, база. Всё, это база! Это основа! Это базис.

Answer 2

[Vakhtang Tivadze]

const ul = document.querySelector('ul'),
      result = document.querySelector('h4');

const showFn = (e) => {
  const curEl = e.target;
  if (curEl.tagName === 'LI') {
    result.textContent = curEl.textContent;
  }
}

ul.addEventListener('click', showFn);