Почему при добавлении новых элементов списка уже не получается менять им классы?

@Mahorik · Регистрация: 02.06.2018

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
6
7
8
    <h1>Список задач</h1>
    <ul class="task">   
        <li class="">Example 1</li>
        <li class="">Example 2</li>
        <li class="">Example 3</li>         
    </ul>
    <input type="text" id="inp">
    <a href="#" class="btn">Add Element</a>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var elems = document.querySelector('.task').children;
var inp = document.getElementById('inp');
 
 
document.querySelector('.btn').onclick = function(){
    var li = document.createElement('li');
    li.innerHTML = inp.value;
    document.querySelector('.task').appendChild(li);
    }
 
 
for (var i =0; i<elems.length; i++){
    elems[i].onclick = function(){
        this.classList.toggle('active');
    }
}

Добрый День!
Кто-нибудь может подсказать почему при добавлении новых элементов списка уже не получается менять им классы? ('active')
И как это исправить?

@EveKS · 07.11.2018, 08:27

JavaScript
1
2
var elems = document.querySelector('.task').children;
var inp = document.getElementById('inp');

Заменить на функции
Как вариант

JavaScript
1
2
3
4
5
6
7
function elems(){
  return document.querySelector('.task').children;
}
 
function inp(){
  return document.getElementById('inp');
}

Потому что elems формируется только в момент формирования

@Mahorik · 07.11.2018, 09:14 **[ТС]**

М...понятно)
Но как связать функцию

JavaScript
1
2
3
function elems(){
    return document.querySelector('.task').children;
  }

С вот этим?

JavaScript
1
2
3
4
5
for (var i =0; i<elems.length; i++){
    elems[i].onclick = function(){
        this.classList.toggle('active');
    }
}

@EveKS · 07.11.2018, 09:26

JavaScript
1
2
3
4
5
for (var i =0; i<elems.length; i++){
    elems[i].onclick = function(){
        this.classList.toggle('active');
    }
}

Это тоже только раз вызывается

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var elems = document.querySelector('.task').children;
var inp = document.getElementById('inp');
 
document.querySelector('.btn').onclick = function(){
    var li = document.createElement('li');
    li.innerHTML = inp.value;
 
    li.onclick = function(){
        this.classList.toggle('active');
    }
 
    document.querySelector('.task').appendChild(li);
    }
 
 
for (var i =0; i<elems.length; i++){
    elems[i].onclick = function(){
        this.classList.toggle('active');
    }
}

Так заработает

@Mahorik · 07.11.2018, 13:15 **[ТС]**

Спасибо!

@j2FunOnly · 08.11.2018, 08:16

Или так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// var elems = document.querySelector('.task').children;
var inp = document.getElementById('inp');
 
 
document.querySelector('.btn').onclick = function() {
  var li = document.createElement('li');
  li.innerHTML = inp.value;
  document.querySelector('.task').appendChild(li);
}
 
document.querySelector('.task').addEventListener('click', function(e) {
  if (e.target.tagName !== 'LI') return;
 
  e.target.classList.toggle('active');
});

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .

@Mahorik 0 / 0 / 0 Регистрация: 02.06.2018 Сообщений: 9
	07.11.2018, 13:15 [ТС]
	Спасибо! 0

Почему при добавлении новых элементов списка уже не получается менять им классы?

Решение