Aufbau einer Todo-Liste in Javascript

Ich bin ziemlich neu zu Javascript und Arbeiten über Javascript & jquery Buch. Um mich selbst zu testen, versuche ich eine Todo-Liste Javascript zu erstellen. Mit Hilfe des Buches konnte ich die Funktion "Aus Liste entfernen" erstellen. Ich kann jedoch nicht scheinen, die addToList Funktion zu funktionieren und ich weiß nicht warum. Einsicht wird sehr geschätzt.Aufbau einer Todo-Liste in Javascript

var item, list, feedback; 
item = document.getElementById("item"); 
list = document.getElementById("list"); 
feedback = document.getElementById("feedback"); 

function addToList() { 

    console.log("I am in"); 
    var newElement = document.createElement("li"); 
    console.log(item.value); 
    newItem = item.value 
    newElement.innerHTML = newItem; 
    list.appendChild('<a>newElement</a>'); 
    // el.innerHTML = item.value; 
    feedback.innerHTML = "Item added."; 
    console.log("working"); 
} 

function removeFromList(e) { 
    var target, elParent, elGrandparent; 
    target = e.target; 
    elParent = target.parentNode; 
    elGrandparent = target.parentNode.parentNode; 
    elGrandparent.removeChild(elParent); 
    e.preventDefault(); 
    feedback.innerHTML = "Item removed."; 
} 

list.addEventListener("click", function (e) { 
    removeFromList(e); 
}, false); 

var btn = document.getElementById("add"); 
btn.addEventListener("click", addToList, false); 














<!DOCTYPE html> 
<html> 
    <head> 
     <title>Todo List</title> 
    </head> 

    <body> 
     <input type="text" name="item"><br /> 
     <input type="button" name="add" value="Add" id="add"> 

     <ul id="list"> 
      <li><a href="#">Go to the store.</a></li> 
      <li><a href="#">Visit family.</a></li> 
     </ul> 

     <div id="feedback"></div> 


     <script type="text/javascript" src="todo.js"></script> 
    </body> 
</html>

Quelle

2016-09-01 user3799793

Sie verwenden 'appendChild' nicht korrekt. [Überprüfen Sie Ihre Konsole] (http://stackoverflow.com/documentation/javascript/185/hello-world/714/using-console-log#t=201609012208120879067) und Sie werden einen Fehler im Zusammenhang damit sehen. Wenn Sie 'newElement' in' 'wollen, müssen Sie mit' document.createElement' ein neues '' erstellen und dann' newLink.appendChild (newElement) '. Ähnliches Problem mit 'newElement.innerHTML = newItem'. Verwenden Sie "innerHTML" nur mit Strings, nicht mit Elementen. –

Außerdem haben Sie kein Element mit 'id =" item "' in dem Code, den Sie angezeigt haben, so dass 'document.getElementById (" item ")' fehlschlägt und den Rest Ihres Skripts durchbricht. – dave

Hier sehe ich zwei Fehler:

Sie versuchen item Element von JS auf diese Weise item = document.getElementById("item"); aber in Ihrem HTML <input type="text" bekommen haben keine item id, so der JS-Code kann nur Ich habe das Element nicht gefunden. Sie sollten Ihre HTML in einer solchen Art und Weise ändern:

<input type="text" id="item">
Sie eine Zeichenfolge an appendChild Methode Senden - list.appendChild('<a>newElement</a>');, aber es sollte den Link auf das DOM-Element akzeptieren. So kann man es in einer solchen Art und Weise umschreiben:

var linkToElement = document.createElement("a"); linkToElement.appendChild(newElement); list.appendChild(linkToElement);

Schauen Sie hier für weitere Details http://jsbin.com/dowipuqayo/edit?html,js,output. Es ist nur dein Code mit diesen Änderungen.

Quelle

2016-09-01 22:46:08

Ich habe dein Beispiel durchgegangen und die addToList() behoben Der Code ist kommentiert, so dass es die meisten Dinge erklären sollte.

var item, list, feedback; 
 
/* 
 
* item will be null here becuase there is 
 
* no value when the page first loads. 
 
*/ 
 
//item = document.getElementById("item"); 
 

 
// these two are fine because they exist 
 
list = document.getElementById("list"); 
 

 
feedback = document.getElementById("feedback"); 
 

 
function addToList() { 
 
    // This is where we get the input value (within the funciton) 
 
    item = document.getElementById("item"); 
 
    
 
    // We first create the <li> node 
 
    var newElement = document.createElement("li"); 
 
    // Now we create a text node 
 
    var newItem = document.createTextNode(item.value); 
 
    // append the text node to the <li> node 
 
    newElement.appendChild(newItem); 
 
    
 
    // newElement is now ready to be appended to list 
 
    list.appendChild(newElement); 
 

 
    feedback.innerHTML = "Item added."; 
 
} 
 

 
function removeFromList(e) { 
 
    e.remove(); 
 
} 
 

 
list.addEventListener("click", function(e) { 
 
    removeFromList(e.target); 
 
}, false); 
 

 
var btn = document.getElementById("add"); 
 
btn.addEventListener("click", addToList, false);

<input type="text" name="item" id="item"><br /> 
 
<input type="button" name="add" value="Add" id="add"> 
 

 
<ul id="list"> 
 
    <li><a href="#">Go to the store.</a></li> 
 
    <li><a href="#">Visit family.</a></li> 
 
</ul> 
 

 
<div id="feedback"></div>

Lassen Sie mich wissen, wenn Sie über den Code Fragen haben.

Quelle

2016-09-01 23:05:33

Aufbau einer Todo-Liste in Javascript

Antwort

Verwandte Themen