Почему toggle меняет класс только одного элемента?

Question

[ichijinroh]

Осваиваю всплывание. Мне нужно по тогглить любую из лишек списка. Соответственно креплю событие на сам список, и ставлю проверку что бы выделялись только элементы "LI", и почти так и происходит, но куда бы я ни кликал, выделяется только верхняя "ЛИшка". Пробовал на объявлении переменной item сменить на querySelectorAll, тогда вообще ошибку выдавать начинает.

<div class="container">
    <ol class="list" id='lis'>
        <li class="item">Задача</li>
        <li class="item">Задача</li>
        <li class="item">Задача</li>
    </ol>

    <textarea name="" id="" cols="30" rows="10" id="trea" class="text">Ну чё ты?</textarea>
    <button onclick='submitTask()' id='pu'>ok</button>
</div>

let list = document.querySelector('ol')
let item = document.querySelector('li')

function submitTask() {
    let textarea = document.querySelector('textarea')
    list = document.querySelector('ol')
    let newTask = document.createElement('li')
    newTask.innerText = textarea.value
    list.appendChild(newTask)
}

document.querySelector('.list').addEventListener( 'click', function (ev) {
    if (ev.target.tagName === 'LI') {
        item.classList.toggle('done')
    }
});

.done {
    text-decoration: underline;
}

Comments

[Алексей Абрамов]

let item = document.querySelector('li') в item всегда будет лежать первый найденный элемент.
на querySelectorAll ошибка, так как там лежит массив и не понятно, в какой именно элемент вы стучитесь

Answer 1

[Алексей Уколов]

Ещё раз вам повторяю: полезно себе проговаривать, что буквально написано в коде и в каком порядке оно будет исполняться. Иначе вы так и будете за каждой буквой сюда ходить. Что у вас делает переменная item, зачем она нужна, почему он создаётся при открытии страницы?

if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('done')
}

P.S. Зачем вы в submitTask перенесли поиск textarea и list?

Comments

[ichijinroh]

Ну я и проговариваю - "выхватываем тег li, сохраняем в переменную, (в моём понимании в момент клика выбирается какая именно li имеется в виду) далее клики на этих li тогглят класс". По сути я ожидал от своего кода того же самого поведения, которого вы достигли при помощи target. Теперь понимаю несколько больше. Ещё раз спасибо за помощь )))

[ichijinroh]

А поиск textarea и list перенёс что бы локализовать переменные, которые нужны для этой функции. Я так понял, что правильным подходом считается прятать в функцию всё что можно, что бы не переопределить случайно нужную для этой функции переменную.
Хотя вот буквально пока печатаю осознаю, что ведь и переопределял бы я в области видимости функции и видимо на переменную в глобальной области это повлиять не должно, а значит этих двоих лучше оставить в глобалке, что бы другие функции могли ими пользоваться

[Stalker_RED]

ichijinroh, чтобы случайно не переопределить используйте const а не let
И эти элементы не меняются же, зачем их искать в DOM заново при каждом обращении?

const list = document.querySelector('ol');
const textarea = document.querySelector('textarea');

function submitTask() {
    const newTask = document.createElement('li');
    newTask.innerText = textarea.value;
    list.appendChild(newTask);
}

document.querySelector('.list').addEventListener( 'click', function (evt) {
  const li = evt.target.closest('li');
  if (li) {
    li.classList.toggle('done');
  }
});

[Алексей Уколов]

Более того, нет никакого смысла искать сначала list = document.querySelector('ol'), а потом document.querySelector('.list').

Answer 2

[Stalker_RED]

Что не так?

let item = document.querySelector('li') // первый попавшийся li
// ...
item.classList.toggle('done') // именно ему вы и переключаете класс

Вот вам для сравнения

Comments

[ichijinroh]

не так что-то с моим пониманием ))) Я осознавал, что чего-то не доделываю, для правильного выбора, но подсказали, теперь понимаю )

Answer 3

[Ruslan]

ищи все элементы, а не 1

Answer 4

[Test-style]

Как и написали, но не пояснили: document.querySelector находит первый подходящий по query элемент. Если ожидается несколько элементов, то используй document.querySelectorAll. Получишь массиво-подобный объект состоящий из всех найденных элементов. Что дальше с ними делать? Итерировать...

Comments

[ichijinroh]

Пробовал на объявлении переменной item сменить на querySelectorAll, тогда вообще ошибку выдавать начинает. )))

[Test-style]

Так нужно читать ошибку. Что бросается в глаза ?

item.classList.toggle('done')

Если ты получаешь массив item , то у массива нет метода .classList - ошибка... Ты должен пройтись по всем элементам массива (точнее коллекции) и к элементу применять .classList

[Test-style]

п.с. в логах ошибок половина ответов...