Почему не срабатывает условие (event.type и event.target)?

Question

[Светлана]

Здравствуйте.

Изучаю JS, в данный момент DOM, знания небольшие.
После теории выполняю практические задания.
На двух задачах застряла, не понимаю, как сделать (задания на event.type и event.target).
Заранее благодарна за помощь в решении и объяснение, где я ошиблась.

Задача1
к двум событиям привязан один и тот же обработчик:
<button id="elem">text</button>

let  elemButton= document.querySelector('#elem');
 elemButton.addEventListener('click', func);
 elemButton.addEventListener('dblclick', func);
function func() {   }

Допишите код функции func так, чтобы при клике на элемент этот элемент красился в зеленый цвет, а при двойном клике - в красный.

мое решение:

function func(event) {
  console.log(event.type);
  if (event.type = "click") {
    elemButton.style.backgroundColor = "green";
  }
  if (event.type = "dblclick") {
    elemButton.style.backgroundColor = "yellow";
  }
}

Но при нажатии одним кликом срабатывает сразу второе условие и кнопка становится желтой.
если закомментировать второе условие, тогда первое срабатывает и кнопка становится зеленой.
При этом в консоли при одном клике отображается "click", а при двойном "click", "click", "dblclick".

Задача2
Пусть есть список ul с тегами li:

<ul id="elem">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Привяжите к тегу ul обработчик клика. В этом обработчике проверяйте с помощью свойства tagName, по какому тегу был клик. Если клик был по тегу li - добавьте в конец текста этого тега восклицательный знак. А если клик был по тегу ul - добавьте ему в конец еще один пункт списка.

мое решение:
Тег, на который был сделан клик, определяется верно, и в случае с ul все работает, а вот с li - не работает.
я исходила из того, что элементы li образуются массив и функция, в которой идет присвоение '!' содержимому li, должна выполнятся для li, по которому сделан клик.

let elemUl = document.querySelector('#elem');
elemUl.addEventListener('click', func);

function func(event) {
  let elemTarget = event.target.tagName.toLowerCase();
  console.log(elemTarget); 
  
  if (elemTarget === 'ul') {
    let newP = document.createElement('li');
    newP.innerHTML = 'text';
    elemUl.appendChild(newP);
  }
  
  if (elemTarget === 'li') {
    console.log(this);
    
    let elemsLi = document.querySelectorAll('li');
    for (let elemLi of elemsLi) {
      elemLi.addEventListener('click', funcLi);
    }
    function funcLi() {
      this.innerHTML += '!';
    }  
  }
}

Comments

[0xD34F]

3.4, 3.7

[Светлана]

0xD34F, учту, спасибо.

Answer 1

[Tim]

В первом случае у вас не верное сравнение

- if (event.type = "click") 
+ if (event.type === "click") 

- if (event.type = "dblclick")
+ if (event.type ==== "dblclick")

Во втором случае зачем вешаете новый обработчик клика на элемент li? Этого делать не нужно. Достаточно:

if (elemTarget === 'li') {
    event.target.textContent += '!'
  }

Comments

[Светлана]

Да, намудрила я, а оказалось все достаточно просто...
Спасибо за помощь, разобралась.

Answer 2

[Денис Инешин]

У вас сразу классическая ошибка новичка в условии:
if (event.type = "click") {
вместо оператора сравнения === вы используете оператор присвоения =

Comments

[Kovalsky]

По этому поводу предлагаю Светлане прямо с самого начала обучения использовать для разработки IDE которая сразу подсветит все ошибки, а не блокнот. Причем если используется vscode (который сука и простейшие ошибки не подсвечивает без тонкой настройки), то стоит всё же потратить время на его настройку

[Денис Инешин]

Kovalsky, а я наоборот рекомендую пока не использовать. Да, такие ошибки глупые, но они учат нас обращать внимание на такие вещи, запоминать их смысл, а не бездумно использовать. IDE пригодится позже когда уже начнется профессиональная деятельность.

[Дмитрий Беляев]

Kovalsky, а в других IDE разве не так? в топку такие IDE которые запрещают валидный синтаксис без настройки, и вообще берут на себя функции целевых инструментов вроде линтера или тайпчекера
Вот Вам полне валидное применение присваивания внутри if:

const getResult = () => ({ok: true, data: 1});

let result;
if(result = getResult(), result.ok) {
  console.log(result.data);
}

И да, нормально так писать не стоит, но после оптимизаций код вполне может превратится в такой, и нужно уметь его читать.

[Kovalsky]

Дмитрий Беляев, ну хз насчет других сред, но в своих уютных вебстормах и идеях для включения линта и типизации мне достаточно открыть файл. Всё, с тех пор как он открыт у меня высвечиваются все подсказки связанные с использующимися в нем языками/инструментами. И прямо под подсказкой есть кнопка "edit config" на случай если мне какие-то конкретные подсказки не очень нужны. В моем исходном комментарии речь больше была о том, что вскод хер заставишь подсказывать в принципе. Он довольно интровертный, не общительный. Проверено не один раз, новичку настолько сложно его заставить работать, что он лучше бросит всё это нафиг чем доделает до конца

[Светлана]

Денис Инешин, спасибо, что поправили. Ошибка, действительно, глупая... Забавно, что во второй задаче я написала как надо...
Небольшие задачи я решаю в Codepen. VSCode использую, но для верстки пока.

Answer 3

[Сергей Филиппов]

Переписал Ваш код чуть компактнее

let elem = document.getElementById('elem');
elem.addEventListener('click', function(e) { 
  if (e.target.tagName === 'UL') {
    let li = document.createElement('li');
    li.innerHTML = 'text';
    elem.appendChild(li);
  }
  if (e.target.tagName === 'LI') {
    e.target.textContent += '!';
  }
})