Hier ist meine Aufgabe:
Jedes Mal, wenn Sie eine Aufgabe aktualisieren (aktivieren, deaktivieren oder hinzufügen), sollte das Ausgabeelement mit der Anzahl der abgeschlossenen Aufgaben und der Anzahl der Aufgaben aktualisiert werden. Wenn Sie beispielsweise 7 Aufgaben haben und 3 erledigt sind, sollte "3/7 erledigt" lauten.
In Teil 3 des Js-Codes habe ich ein Array erstellt, das alle Aufgabenelemente in der durch die Benutzereingabe erstellten HTML-Liste enthält. In Teil 5 unten habe ich eine Funktion namens taskAmount erstellt, bei der ich versucht habe, mithilfe einiger JavaScript-Funktionen die Anzahl der aktivierten Kontrollkästchen und die Anzahl der Elemente in der Aufgabenliste zu ermitteln. Ich habe dann versucht, diese Werte zurückzugeben und an die Konsole auszudrucken, um zu überprüfen, ob es funktioniert. Am Ende möchte ich versuchen, eine Ausgabe zu erstellen, die der im Beispiel gezeigten ähnlich ist, aber ich denke, ich kann das selbst tun, sobald ich die gewünschten Werte habe.
Ich erhalte keine Fehlermeldung, aber meine Funktion scheint nicht zu funktionieren. Ich vermute, dass ich in den letzten Zeilen in der Funktion taskAmount einen Fehler gemacht habe.
Mein Versuch:
tasks = [];
function addTask() {
var li = document.createElement("li");
// Adding checkbox
var cbox = document.createElement('INPUT');
cbox.setAttribute('type', 'checkbox');
li.appendChild(cbox);
cbox.setAttribute('id', 'box');
// Adding thing to do
var inputValue = document.getElementById("newTask").value;
var task = document.createTextNode(inputValue);
li.appendChild(task);
if (inputValue === '') {
alert("You must write something!");
} else {
var ullist = document.getElementById("list");
ullist.insertBefore(li, ullist.childNodes[0]);
}
// Part 3
tasks.push(newTask.value);
document.getElementById("newTask").value = '';
}
// Prevent Default
document.getElementById("submit").addEventListener("click", function() {
event.preventDefault()
});
// Part 4
function ifChecked() {
var list1 = document.querySelector('ul');
list1.addEventListener('click', function(ev) {
if (ev.target.tagName === 'INPUT') {
ev.target.parentElement.classList.toggle('checked');
}
}, false);
}
ifChecked();
// Part 5
function taskAmount() {
var totalTasks;
var checkedTasks;
document.getElementById("submit").addEventListener('click', function() {
var totalTasks = tasks.length;
var checkedTasks = document.querySelectorAll('input[type="checkbox"]:checked').length;
return (totalTasks);
return (checkedTasks);
})
console.log(totalTasks);
console.log(checkedTasks);
}
taskAmount();body {
width: 600px;
margin: auto;
background: #ffe699;
font-family: garamond;
font-size: 25px;
}
ul {
list-style-type: none;
padding: 0;
border: 2px solid black;
}
ul li {
padding-top: 15px;
padding-bottom: 15px;
font-weight: bold;
transition: 0.3s;
}
fieldset {
background: skyblue;
border: 2px solid black;
}
ul li:nth-child(odd) {
background-color: skyblue;
}
ul li:nth-child(even) {
background-color: white;
}
ul li:hover {
background-color: #55D;
}
#box {
margin: 0px 20px 0px;
}
.checked {
text-decoration: line-through;
}HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> To do list </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> To do list </h1>
<form class="" action="todo.html" method="post">
<fieldset>
<label> Add a task in the input field below </label> <br><br>
<input id="newTask" type="text" placeholder="Type a task here" autofocus> <br><br>
<input id="submit" onclick="addTask()" type="submit" value="Add task"><br><br>
<output name="result"> </output>
</fieldset>
</form>
<h2>List of things to do</h2>
<ul id="list">
</ul>
<script src="todo.js">
</script>
</body>
</html>Entfernen Sie den Ereignishandler in der Funktion taskAmount () und rufen Sie die Funktion zum Hinzufügen von Aufgaben auf, um das Problem zu beheben. Außerdem wurde Ihre ID für den generierten Inhalt eindeutig.
tasks = [];
var idCount = 1;
function addTask() {
var li = document.createElement("li");
// Adding checkbox
var cbox = document.createElement('INPUT');
cbox.setAttribute('type', 'checkbox');
cbox.addEventListener('change', taskAmount);
li.appendChild(cbox);
cbox.setAttribute('id', 'box' + idCount);
idCount++;
// Adding thing to do
var inputValue = document.getElementById("newTask").value;
var task = document.createTextNode(inputValue);
li.appendChild(task);
if (inputValue === '') {
alert("You must write something!");
} else {
var ullist = document.getElementById("list");
ullist.insertBefore(li, ullist.childNodes[0]);
}
// Part 3
tasks.push(newTask.value);
document.getElementById("newTask").value = '';
taskAmount();
}
// Prevent Default
document.getElementById("submit").addEventListener("click", function() {
event.preventDefault()
});
// Part 4
function ifChecked() {
var list1 = document.querySelector('ul');
list1.addEventListener('click', function(ev) {
if (ev.target.tagName === 'INPUT') {
ev.target.parentElement.classList.toggle('checked');
}
}, false);
}
ifChecked();
// Part 5
function taskAmount() {
var totalTasks = tasks.length;
var checkedTasks = document.querySelectorAll('input[type="checkbox"]:checked').length;
console.log(totalTasks);
console.log(checkedTasks);
}body {
width: 600px;
margin: auto;
background: #ffe699;
font-family: garamond;
font-size: 25px;
}
ul {
list-style-type: none;
padding: 0;
border: 2px solid black;
}
ul li {
padding-top: 15px;
padding-bottom: 15px;
font-weight: bold;
transition: 0.3s;
}
fieldset {
background: skyblue;
border: 2px solid black;
}
ul li:nth-child(odd) {
background-color: skyblue;
}
ul li:nth-child(even) {
background-color: white;
}
ul li:hover {
background-color: #55D;
}
#box {
margin: 0px 20px 0px;
}
.checked {
text-decoration: line-through;
}HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> To do list </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> To do list </h1>
<form class="" action="todo.html" method="post">
<fieldset>
<label> Add a task in the input field below </label> <br><br>
<input id="newTask" type="text" placeholder="Type a task here" autofocus> <br><br>
<input id="submit" onclick="addTask()" type="submit" value="Add task"><br><br>
<output name="result"> </output>
</fieldset>
</form>
<h2>List of things to do</h2>
<ul id="list">
</ul>
<script src="todo.js">
</script>
</body>
</html>Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen