Event.target.className — как правильно настроить?

145

19 ноября 2018, 22:20

Изучаю делегирование событий

https://jsfiddle.net/nytw2efk/4/

  document.querySelector('.income').addEventListener('click', function (e) {
    if (e.target.className = "fick") {
        e.target.classList.toggle('redtext');
         alert(e.target.className);     
        }

    })

по идее должен при клике меняться цвет, но только у элемента с классом fick В итоге: 1. при клике меняется цвет у элементов и без класса fick и вообще alert показывает что будто класс fick у каждого элемента 2. при повторном клике toggle не срабатывает

Что не так?

Answer 1

Не

if (e.target.className = "fick") {

if (e.target.className == "fick") {

а еще лучше

if (e.target.classList.contains("fick")) {

Что было у Вас:

оператор присваивания в условии if назначал кликнутому элементу (любому) атрибут class="fick" и возвращал это значение, что в булевском смысле трансформировалось в true. То есть код внутри блока if всегда выполнялся.

На первый клик по какому-либо элементу его класс сначала становился "fick" - внутри условия if, а потом "fick redtext" - при выполнении toggle, и элемент становился красным. При втором клике (и всех последующих кликах) происходило то же самое, и элемент оставался красным.

Почему не работает с ==:

Точное равенство "icome__title fick" и "fick", конечно, дает false, и код в блоке if не выполняется.