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();
})
};
Aucun commentaire:
Enregistrer un commentaire