如何将新项目添加到待办事项列表？

Question

I am coding a form and a part of it requires adding new items to a to-do list named 'list of works'. The issue seems to be in my JavaScript. I am a total beginner and I have done my best but it is not working. I would appreciate any help. Attached is the link to my code https://plnkr.co/edit/QznPAo7ucKBN8xJF .

 function newElement() { var li = document.createElement("li"); var inputValue = document.getElementById("myInput").value; var t = document.createTextNode(inputValue); li.appendChild(t); document.getElementById("myInput").value = ""; var span = document.createElement("SPAN"); var txt = document.createTextNode("×"); span.className = "close"; span.appendChild(txt); li.appendChild(span); }

 /* the box containg the 'new project' form */.box { border: none; padding: 4%; background-color: #FAEC31; border-radius: 4%; } /* the styling of text in the form */.form-content { font-size: 13px; font-family: Helvetica; }.addBtn { padding: 1%; background-color: #FAD626; cursor: pointer; border-radius: 20%; border-color: #FAD626; }.addBtn:hover { background-color: #F2F6F8; }

 <div class="box"> <div class="form-content"> <form> <h2>Project information</h2> <label for="works-list">List of works:</label> <div id="myDIV" class="header"> <input type="text" id="myInput" placeholder="Title..."> <span onclick="newElement()" class="addBtn">Add</span> </div> <ul id="myUL"> <li>to do 1</li> <li>to do 2</li> </ul> </form> </div> </div>

Answer 1

You forgot to add the item to the list. Retrieve the UL element and append the LI one to it:

  // [...]
  li.appendChild(span);
  // UL retrieval 
  var ul = document.getElementById("myUL");
  // LI appending
  ul.appendChild(li);

---

Working snippet:

 function newElement() { var li = document.createElement("li"); var inputValue = document.getElementById("myInput").value; var t = document.createTextNode(inputValue); li.appendChild(t); document.getElementById("myInput").value = ""; var span = document.createElement("SPAN"); var txt = document.createTextNode("×"); span.className = "close"; span.appendChild(txt); li.appendChild(span); var ul = document.getElementById("myUL"); ul.appendChild(li); }

 /* the box containg the 'new project' form */.box { border: none; padding: 4%; background-color: #FAEC31; border-radius: 4%; } /* the styling of text in the form */.form-content { font-size: 13px; font-family: Helvetica; }.addBtn { padding: 1%; background-color: #FAD626; cursor: pointer; border-radius: 20%; border-color: #FAD626; }.addBtn:hover { background-color: #F2F6F8; }

 <div class="box"> <div class="form-content"> <form> <h2>Project information</h2> <label for="works-list">List of works:</label> <div id="myDIV" class="header"> <input type="text" id="myInput" placeholder="Title..."> <span onclick="newElement()" class="addBtn">Add</span> </div> <ul id="myUL"> <li>to do 1</li> <li>to do 2</li> </ul> </form> </div> </div>

Answer 2

You are missing getting the list and adding items to it with what you already created. Also, in your online sample, you are using <script> tags within your .js and that's a mistake, just get rid of them.

function newElement() {
  var list = document.getElementById('myUL');
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);

  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);
  list.appendChild(li);
}