Zaczynam z JavaScript i potrzebuję trochę pomocy w tworzeniu prostej listy do zrobienia. Widziałem kilka pytań na temat tego rodzaju rzeczy na przepełnieniu stosu, ale większość z nich używa jQuery lub bardzo innego podejścia niż zabrałem. Kod pomyślnie podejmuje wartość wejścia i dynamicznie tworzy z niego zawartość, a także przełącza "kompletne" kliknięcie klas CSS. Problem, który mam, polega na tym, że zamiast tworzyć nowy LI dla każdego zadania wejściowego, spowoduje utworzenie nowego LI po raz pierwszy, a następnie dodać nowe zadania do tego LI.

  (function() { //IIFE
  // DOM queries
    var item = document.getElementById("input").value; //list item input
    var ul = document.getElementById("task-list"); //task list container
    var li = document.createElement('li');
    li.className = "list-group-item"; //list item created and assigned class
    var button = document.getElementById("button") //add item button

    // event listeners
    // add task on button click
    button.addEventListener('click', function(){ //create new list item
      li.appendChild(document.createTextNode(input.value)); //get input from form
      ul.appendChild(li); //attach task to list
      console.log('clicked');
    }, false);

    // toggle task complete on item click
    li.onclick = function(){
      console.log('toggle task completion');
      li.classList.toggle('complete');
    }

}()); //IIFE ENDS

Jak mogę utworzyć nowy Li za każdym razem, zamiast włączyć nowe zadania do pierwszego utworzonego Li? Jestem pewien, że to prosta poprawka, po prostu nie mogę tego wymyślać. Z góry dziękuję!

1
S Knight 4 czerwiec 2018, 02:50

3 odpowiedzi

Najlepsza odpowiedź

Musisz utworzyć li i słuchacza zdarzeń dla każdego li wewnątrz przycisku Kliknij słuchacz:

// DOM queries
var item = document.getElementById("input").value; //list item input
var ul = document.getElementById("task-list"); //task list container
var button = document.getElementById("button") //add item button
// event listeners
// add task on button click
button.addEventListener('click', function() { //create new list item
  var li = document.createElement('li');
  li.className = "list-group-item"; //list item created and assigned class
  li.textContent = input.value;
  ul.appendChild(li); //attach task to list 
  // toggle task complete on item click
  li.onclick = function() {
    console.log('toggle task completion');
    li.classList.toggle('complete');
  }
}, false);
.complete { color: green }
<input id="input">
<div id="button">add</div>
<ul id="task-list"></ul>

Choć może być ładniejszy, aby mieć tylko jednego słuchacza na ul, przy użyciu delegacji zdarzeń, zamiast dodawać innego słuchacza za każdym razem, gdy element dodaje:

// DOM queries
var item = document.getElementById("input").value; //list item input
var ul = document.getElementById("task-list"); //task list container
var button = document.getElementById("button") //add item button
// event listeners
// add task on button click
button.addEventListener('click', function() { //create new list item
  var li = document.createElement('li');
  li.className = "list-group-item"; //list item created and assigned class
  li.textContent = input.value;
  ul.appendChild(li); //attach task to list 
}, false);
ul.onclick = (e) => {
  if (e.target.tagName !== 'LI') return;
  // toggle task complete on item click
  console.log('toggle task completion');
  e.target.classList.toggle('complete');
};
.complete { color: green }
<input id="input">
<div id="button">add</div>
<ul id="task-list"></ul>
0
CertainPerformance 3 czerwiec 2018, 23:54

Po prostu umieść wszystko, co tworzy li do obsługi ONCLICK:

(function() { //IIFE
  // DOM queries
    var item = document.getElementById("input").value; //list item input
    var ul = document.getElementById("task-list"); //task list container
    var button = document.getElementById("button") //add item button

    // event listeners
    // add task on button click
    button.addEventListener('click', function(){ //create new list item
      var li = document.createElement('li');
      li.className = "list-group-item"; //list item created and assigned class
      li.appendChild(document.createTextNode(input.value)); //get input from form
      li.onclick = function(){
        console.log('toggle task completion');
        li.classList.toggle('complete');
      }
      ul.appendChild(li); //attach task to list
      console.log('clicked');
    }, false);

    // toggle task complete on item click


}()); //IIFE ENDS

Spowoduje to, że tworzy nową li - element za każdym razem, a nie tylko raz

0
Luca Kiebel 3 czerwiec 2018, 23:54

Elementy Dom są unikalne po utworzeniu. Nie możesz użyć tego samego li utworzonego, aby dołączyć nowe li . Musisz utworzyć nowe li za każdym razem:

(function() { //IIFE
    // DOM queries
    var item = document.getElementById("input").value; //list item input
    var ul = document.getElementById("task-list"); //task list container
    //Remove line creating li here
    li.className = "list-group-item"; //list item created and assigned class
    var button = document.getElementById("button") //add item button

    // event listeners
    // add task on button click
    button.addEventListener('click', function(){ //create new list item
        //Placed line here
        var li = document.createElement('li');
        li.appendChild(document.createTextNode(input.value)); //get input from form
        ul.appendChild(li); //attach task to list
        console.log('clicked');
    }, false);

    // toggle task complete on item click
    li.onclick = function(){
    console.log('toggle task completion');
    li.classList.toggle('complete');
    }
}()); //IIFE ENDS
0
Facundo Larrosa 3 czerwiec 2018, 23:56