Faris Faris - 1 month ago 9
jQuery Question

jquery html simple to do list

Coding some simple to do list but I cant figure out whats the problem in my code.
Can someone figure it out? Thanks.
Here's the code:



$(document).ready(function() {
$("#add").click(function() {

var newListItem = $("#addtolist").val();
if (newListItem.length > 0) {
$("#todolist").append("<li> + newListItem + </li>");
$("#addtolist").val(" ");
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>To Do List jQuery</h1>

<ul id="todolist">
</ul>

<br>
<input type="text" id="addtolist" placeholder="Type">
<button id="add">Add</button>




Answer

You are not creating thing the element properly.

 $("#todolist").append("<li>" + newListItem + "</li>");

$(document).ready(function() {
  $("#add").click(function() {

    var newListItem = $("#addtolist").val();
    if (newListItem.length > 0) {
      $("#todolist").append("<li>" + newListItem + "</li>");
      $("#addtolist").val(" ");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>To Do List jQuery</h1>

<ul id="todolist">
</ul>

<br>
<input type="text" id="addtolist" placeholder="Type">
<button id="add">Add</button>