New tasks won't delete when checkbox clicked.

I am new to programming and for fun am trying to put together a todo list app.

When the user clicks on the text of the first Item the program will strike-through the text and when the user clicks the checkbox on the first item it disappears like I want it to. But when I add a new task the strike-through and checkbox don't work. Here is my code. Thanks for the.

HTML
<!DOCTYPE html>
<head>    
</head>
<body>
    <div id = "header">
        <h1> To Do List</h1>
    </div>
    <div id = "form">
        <form>
            <input type = "text" id = "todo"> 
            <button type = "button" id= "submit"> Submit </button>
        </form>
    </div>

    <div id = "tasklist">
        <ol id = "list">
            <li id = "listitem"><input type = "checkbox" class="checkbox"      
> Clean</li>

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

Here is my js

window.onload = function(){

    //Add new to do task by entering text and clicking submit
    var submit = document.getElementById('submit');
    submit.onclick = function(){
        var task = document.getElementById('todo').value;
        console.log(task);
        var ol = document.getElementById("list")
        var entry = document.createElement('li');
        entry.id = 'id'
        var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.className = "checkbox"
        entry.appendChild(checkbox)
        entry.appendChild(document.createTextNode(task));
        ol.appendChild(entry);
        };

    //Strike through task if click on text
    $("li").click(function(){
        $(this).css("text-decoration", "line-through");
    });

    //Remove task when click checkbox
    $(".checkbox").click(function(){
        $(this).parent().hide();
    })
};

Answers 1

  • You need to delegate the event handler for those links since they aren't in the DOM when the page is rendered. You can do this by attaching the click handler by using $(document).on() and specifying the element you want the handler to attach to.

    Here's a reference https://learn.jquery.com/events/event-delegation/

    //Add new to do task by entering text and clicking submit
    var submit = document.getElementById('submit');
    submit.onclick = function() {
      var task = document.getElementById('todo').value;
      console.log(task);
      var ol = document.getElementById("list")
      var entry = document.createElement('li');
      entry.id = 'id'
      var checkbox = document.createElement('input');
      checkbox.type = "checkbox";
      checkbox.className = "checkbox"
      entry.appendChild(checkbox)
      entry.appendChild(document.createTextNode(task));
      ol.appendChild(entry);
    };
    
    $(document).on('click', 'li', function(e) {
      //Strike through task if click on text
      $(this).css("text-decoration", "line-through");
    }).on('click', '.checkbox', function(e) {
      //Remove task when click checkbox
      $(this).parent().hide();
    })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="header">
      <h1> To Do List</h1>
    </div>
    <div id="form">
      <form>
        <input type="text" id="todo">
        <button type="button" id="submit"> Submit </button>
      </form>
    </div>
    
    <div id="tasklist">
      <ol id="list">
        <li id="listitem"><input type="checkbox" class="checkbox"> Clean</li>
    
      </ol>
    </div>


Related Articles