Почему не отрабатывает событие?

Question

[Фёдор]

Есть такой вот код:

Не могу понять, что не так и почему ничего не происходит из задуманного. Должен при нажатии выводить "!" в li при клике на элемент, либо добавлять новую лишку в конец ul

Comments

[Виктор Л]

где Ul на странице клик по которому вы обрабатываете?

let elem = document.querySelector('#elem');

elem.addEventListener('click', (event) => {  
    console.log(event.target)
    let li = event.target;
    li.innerHTML += '!';    
});

[Фёдор]

Виктор Л, он же лежит в elem и на нём висит click. Разве нет?

Answer 1

[0xD34F]

• tagName:
  
  

  For DOM trees which represent HTML documents, the returned tag name is always in the canonical upper-case form.

  
  А теперь посмотрите, что вы у себя написали:
  
  

  if(str.tagName == 'ul') {

  
  

  } else if (str.tagName == 'li') {

  
  Кстати, а почему str, что за странный выбор имени? Там же элемент, а не строка.
  
  
• Вместо элемента добавляется строка:
  
  

  elem.append('li');

  
  
• Крайне странное назначение обработчика клика:
  
  

  for (let el of strLi) {
      el.addEventListener('click',func);
  };

  
  Во-первых - зачем каждый раз добавлять всем? Хорошо, что хоть объявление func вынесено за пределы текущей функции, иначе бы при каждом клике всем существующим li добавлялся новый обработчик.
  
  Во-вторых - пока не кликните по li, на свежесозданных li клик обрабатываться не будет (касается и тех, что изначально существуют).
  
  В-третьих - а на хрена оно надо? Вы же уже обрабатываете клик по li - так зачем назначать отдельный обработчик клика? То, что делаете в func, вполне можно делать прямо тут.
  
  

А вообще, исправлять существующий код я бы не стал. Лучше его вырезать полностью и написать другой, получится гораздо проще и короче:

document.querySelector('ul').addEventListener('click', e => {
  const t = e.target;
  const ct = e.currentTarget;
  t.insertAdjacentHTML('beforeend', ct === t ? '<li>text</li>' : '!');
});

Answer 2

[Фёдор]

В общем проблемы были в следующем:
1.Как верно указал 0xD34F в сравнении надо указывать элементы в верхнем регистре. Согласно спецификации MDM.

2. Самая банальная невнимательность.

if(str.tagName == 'UL') {
        let li = document.createElement('li');
        li.innerHTML = 'text';
        elem.append('li');

Всего лишь лишние кавычки. В строке "elem.append( li )". Собственно из-за них не выводились новые li.