@ichijinroh

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

Осваиваю всплывание. Мне нужно по тогглить любую из лишек списка. Соответственно креплю событие на сам список, и ставлю проверку что бы выделялись только элементы "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;
}
  • Вопрос задан
  • 126 просмотров
Решения вопроса 2
alexey-m-ukolov
@alexey-m-ukolov Куратор тега JavaScript
Ещё раз вам повторяю: полезно себе проговаривать, что буквально написано в коде и в каком порядке оно будет исполняться. Иначе вы так и будете за каждой буквой сюда ходить. Что у вас делает переменная item, зачем она нужна, почему он создаётся при открытии страницы?
if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('done')
}


P.S. Зачем вы в submitTask перенесли поиск textarea и list?
Ответ написан
Stalker_RED
@Stalker_RED
Что не так?
let item = document.querySelector('li') // первый попавшийся li
// ...
item.classList.toggle('done') // именно ему вы и переключаете класс


Вот вам для сравнения
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Lorelin
Student web
ищи все элементы, а не 1
Ответ написан
Комментировать
@Test-style
Как и написали, но не пояснили: document.querySelector находит первый подходящий по query элемент. Если ожидается несколько элементов, то используй document.querySelectorAll. Получишь массиво-подобный объект состоящий из всех найденных элементов. Что дальше с ними делать? Итерировать...
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы