KimberlyLight
@KimberlyLight
начинающий frontend-разработчик

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

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

Изучаю 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 += '!';
    }  
  }
}
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
Tim-A-2020
@Tim-A-2020 Куратор тега JavaScript
В первом случае у вас не верное сравнение
- if (event.type = "click") 
+ if (event.type === "click") 

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

Во втором случае зачем вешаете новый обработчик клика на элемент li? Этого делать не нужно. Достаточно:
if (elemTarget === 'li') {
    event.target.textContent += '!'
  }
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
IonDen
@IonDen
JavaScript developer. IonDen.com
У вас сразу классическая ошибка новичка в условии:
if (event.type = "click") {
вместо оператора сравнения === вы используете оператор присвоения =
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
XPOWER Одесса
от 3 000 до 5 500 $
Artezio Москва
от 160 000 до 220 000 ₽