classList.hinzufügen Funktioniert Nicht

Ich versuche eine einfache to-do-Liste, was mit JavaScript. Im Grunde, Sie eine Position eingeben, um das Eingabefeld, wird es der Liste Hinzugefügt haben, klicken Sie auf es, wenn es fertig ist, dann wird es überschritten. Wenn Sie auf eine Liste, die bereits Durchgestrichen, entfernt die Linie. Aber beim entfernen einer Zeile funktioniert, indem eine Linie durch, funktioniert nicht.

HTML:

    <div><input type="text" value="" id="new_task"><button id="add_task">Add Task</button></div>

    <ul id="tasks">
        <li class="completed selected">One Task</li>
        <li>Two Task</li>
    </ul>

CSS:

<style type="text/css" media="screen">      
    /*local styles if any (quick tests and local only overrides)*/

    #tasks li{
        list-style: none;
    }

    #tasks .selected{
        list-style: disc;
    }

    .completed{
        text-decoration: line-through;
    }
</style>

JavaScript:

<script type="text/javascript" charset="utf-8">
    var inputField = document.querySelector("#new_task");
    var myButton = document.querySelector("#add_task");
    var taskList = document.querySelector("#tasks");
    var newList = document.createElement("li"); 
    var completeTask = document.querySelector("li.completed.selected");
    var incompleteTask = document.querySelector("li:not([class])");

    myButton.onclick = function() {

    taskList.appendChild(newList);
    newList.innerHTML = inputField.value;
    inputField.value = "";
    }

    completeTask.onclick = function() {
    event.target.classList.remove("completed","selected");
    }

    incompleteTask.onclick = function() {
    event.target.classList.add("completed","selected");
    }




</script>

classList ist nicht von IE9 unterstützt und niedriger. Ich nehme an, es ist nicht das, was Sie verwenden? Denn das event keyword sieht verdächtig aus...
Was Sie brauchen, aufrufen von Funktionen, die durch Elemente " - Klasse ist event delegation. Oder Sie können die event-Handler überprüfen Sie die element-Klasse und machen Sie die entsprechende Aufgabe.
Könnten Sie das näher auszuführen? Vor allem der zweite Satz. Ich würde es zu schätzen wissen.
Überprüfen Sie incompleteTask ist tatsächlich verweisen auf die Elemente, die Sie glauben, dass es funktioniert. Es ist möglich, dass Sie die Selektion vor dem DOM geladen wurde.

InformationsquelleAutor Jaeeun Lee | 2014-02-23

javascript onclick

Das Skript analysiert das Dokument nur einmal document.querySelector("li.completed.selected") gibt einen Knoten. Daher, entfernen Sie diese Klassen funktioniert nur auf der Eine Aufgabe was hat diese Klassen durch die Zeit, die das script geparst wird.

müssen Sie onclick handler manuell zu jedem Artikel erstellt, siehe jsFiddle.

    var inputField = document.querySelector("#new_task");
    var myButton = document.querySelector("#add_task");
    var taskList = document.querySelector("#tasks"); 
    var lis = document.querySelectorAll("#tasks li");

function clickHandler() {
      if(event.target.classList.contains("completed"))
         event.target.classList.remove("completed","selected");
      else
         event.target.classList.add("completed","selected");
}

//add onclick handler to existing nodes
for(var i=0; i<lis.length; ++i) lis[i].onclick = clickHandler;

myButton.onclick = function() {
    var newList = document.createElement("li");
    taskList.appendChild(newList);
    newList.innerHTML = inputField.value;
    inputField.value = "";
    //add onclick handler to new nodes
    newList.onclick = clickHandler;

}

Eigentlich querySelector gibt eine einzelne DOM element.
In der Tat, lassen Sie mich anders formulieren es ein wenig...
Dann sollte ich noch eine for-Schleife? Wie könnte ich es lösen?
Aktualisiert, erklärt - vielleicht zu spät, ein wenig 🙂 genießen

InformationsquelleAutor Jan Turoň

3

Können Sie einfach die toggle Methode der classList tauschen sich die Klassen, die Sie lis. Wählen Sie einfach alle Ihre li und Ihre click-event-handler eine Funktion, die schaltet den Klassen.
```
function ch() {
    this.classList.toggle("completed");
    this.classList.toggle("selected");
}

var items = document.querySelectorAll('li');
for (var x = items.length - 1; x >= 0; x--){
    items[x].onclick = ch;
}
```
http://jsfiddle.net/RXH69/
- +1: toggle ist eleganter als eine + hinzufügen/entfernen combo
InformationsquelleAutor Musa

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.