Witam,
niedawno zacząłem naukę JS i mam problem z querySelectorAll(). Problem polega na tym że próbując znaleźć kilka stworzonych w JS elementów <h1 class="title"> querySelectorAll() zwraca mi kilka NodeList. Przez co nie mogę iterować po tych elementach w pętli for. Proszę o pomoc. Poniżej kod .
document.addEventListener('DOMContentLoaded', function() {
var inputArea = document.querySelector("#taskInput");
var listElements = document.querySelector('#taskList');
var addButton = document.querySelector('#addTaskButton');
var allRemove = document.querySelector('#removeFinishedTasksButton');
var newLi = document.createElement('li');
addButton.addEventListener('click', function() {
var newLi = document.createElement('li');
newLi.innerHTML = "<h1 class='title'>" + inputArea.value + "</h1>" +
"<button class='remove'>Delete</button>" +
"<button class='done'>Complete</button>";
listElements.appendChild(newLi);
newLi.querySelector('.done').addEventListener('click', function(event) {
var title = newLi.querySelector('.title');
console.log(title);
if (title.style.color == "red") {
title.style.color = "black";
} else
title.style.color = 'red';
})
newLi.querySelector('.remove').addEventListener('click', function(event) {
this.parentNode.parentNode.removeChild(newLi);
})
allRemove.addEventListener('click', function(event) {
console.log(newLi.querySelectorAll('.title')); //Tutaj otrzymuje ilość NodeList zalezna od ilosci LI w liście,
// a potrzebuje jednej pseudotablicy do iterowania
})
})
})