I'm trying to build a To-Do App with Javascript, right now I'm trying to figure out, how to strike through a todo item with a checkbox and undo that. I've already tried to achieve the same with a button and I got the text to be striken through when I clicked the button, but I couldn't figure out how to undo it.
function newToDo() {
if (document.getElementById("input_todo").value == "") {
confirm("Bitte füllen sie es aus.")
} else {
var newLi = document.createElement("LI");
newLi.id = "itemLi";
newLi.innerHTML = document.getElementById("input_todo").value;
var allTodos = document.getElementById("allTodos");
var checkBox = document.createElement("INPUT");
checkBox.id = "checkBox";
checkBox.type = "checkbox";
var buttonDel = document.createElement("BUTTON");
buttonDel.id = "buttonDel";
buttonDel.setAttribute('onclick', "delToDo()");
allTodos.appendChild(newLi);
newLi.appendChild(checkBox);
newLi.appendChild(buttonDel);
document.getElementById("input_todo").value = "";
if (checkBox.checked == "true") {
document.getElementById("itemLi").style.textDecoration = "line-through";
} else {
document.getElementById("itemLi").style.textDecoration = "none";
}
}
}
function delToDo() {
allTodos.removeChild(itemLi);
}#input_todo {
width: 500px;
height: 24px;
font-size: 16px;
}
#but_todo {
width: 100px;
height: 30px;
}
#itemDiv {
border: 1px solid black;
}
#buttonJa {
width: 50px;
height: 25px;
}
#buttonDel {
width: 50px;
height: 25px;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="todo.css" media="screen">
<title>To-Do</title>
</head>
<body>
<h1>To-Do Liste</h1>
<input id="input_todo" type="text">
<button id="but_todo" onclick="newToDo()">Create To-Do</button>
<ul id="allTodos">
</ul>
<script language="javascript" type="text/javascript" src="todo.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire