-1

i'm trying to make a "To do list" using JavaScript and it doesn't work.I tried different things but it won't work.Please help. Thanks!

document.getElementById("button").onclick = function() {
    var text = document.getElementById("text").value;
    var li = "<li>" + text + "</li>";
    document.getElementById("list").appendChild(li);
   }
<input type="text" id="text"><br><br>
<input type="button" id="button" value="Write">
<ul id="list"></ul>
CodeGuy
  • 1
  • Possible duplicate of [Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.draganddrop.html:20 dropdraganddrop.html:26 ondrop](http://stackoverflow.com/questions/27079598/uncaught-typeerror-failed-to-execute-appendchild-on-node-parameter-1-is-no) – d9ngle May 18 '17 at 14:12

4 Answers4

2

Open the developer tools in your browser. Look at the console.

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at HTMLInputElement.document.getElementById.onclick

You are passing a string to appendChild, but the value it expects is an node such as an element.

document.getElementById("button").onclick = function() {
  var text = document.getElementById("text").value;
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(text));
  document.getElementById("list").appendChild(li);
}
<input type="text" id="text"><br><br>
<input type="button" id="button" value="Write">
<ul id="list"></ul>
Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
  • your code works here on this "Run code snippet" thing, but when I copy&paste it into a Notepad++ it doesn't work. help? – CodeGuy May 18 '17 at 14:18
  • I can't see what you are doing wrong. Does the console complain about trying to access onclick of null? http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – Quentin May 18 '17 at 14:26
0

You can do that by using innerHTML as well, as shown below :

document.getElementById("button").onclick = function() {
  var text = document.getElementById("text").value;     
  document.getElementById("list").innerHTML+="<li>"+text+"</li>";
}
<input type="text" id="text"><br><br>
<input type="button" id="button" value="Write">
<ul id="list"></ul>
Nishesh Pratap
  • 1,939
  • 1
  • 10
  • 19
-1

Like Quentin said but you don't need to create node, you can directly append string with function insertAdjacentHTML

document.getElementById("button").onclick = function() {
    var text = document.getElementById("text").value;
    var li = "<li>" + text + "</li>";
    document.getElementById("list").insertAdjacentHTML("beforeend", li);
   }
<input type="text" id="text"><br><br>
<input type="button" id="button" value="Write">
<ul id="list"></ul>
meteorzero
  • 557
  • 5
  • 15
-1
<input type="text" id="text"><input type="button" id="button" value="Write">

document.getElementById("button").onclick = function() {
            var node = document.createElement("li");                
            var textnode = document.createTextNode(document.getElementById("text").value);    
            node.appendChild(textnode);                             
            document.getElementById("list").appendChild(node);
        }

you can do this way

Mesut erdoğan
  • 52
  • 3