JavaScript - problem z querySelectorAll

pytanie zadane 17 sierpnia 2016 w JavaScript przez Jack9999 Początkujący (300 p.)
zmienione kategorie 17 sierpnia 2016 przez Comandeer

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
        })
        })
    })

1 odpowiedź

odpowiedź 17 sierpnia 2016 przez Comandeer Guru (601,590 p.)

Niemożliwe, żeby querySelectorAll zwracało więcej niż 1 NodeList.

komentarz 17 sierpnia 2016 przez Jack9999 Początkujący (300 p.)

Też tak myślałem ale jednak... W każdym razie problem rozwiązałem wyciągając allRemove.addEventListener z addButton.addEventListener.

Poniżej wrzucam działający kod.

    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');
                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(document.querySelectorAll('.title'));
    })

2	komentarz 17 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.) Też tak myślałem ale jednak... Ale jednak nie... Wydawało Ci się, że zwraca Ci kilka nodelist, po każdym dodaniu elementu do listy, dla buttona o id removeFinishedTasksButton dodawałeś kolejne zdarzenie 'click'.