JS - Lesson 9. Task List

coding_giants

Mar 13th, 2025

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

JavaScript 1.39 KB | None | 0 0

raw download clone embed print report diff

// event when the user clicks on the add button
document.getElementById("addButton").addEventListener("click", function () {
// to the variable we assign the text that the user typed in the input field
const newElement = document.getElementById("element").value.trim();
// if the text is different from empty i.e. the user has typed a string of characters
if (newElement != "") {
// we clear the possible message
document.getElementById("message").textContent = "";
// we add a new item to our numbered list
document.getElementById("taskList").innerHTML +=
"<li>" + newElement + "</li>";
// clear the input field
document.getElementById("element").value = "";
} else {
// we display a message because the user has not entered anything
document.getElementById("message").textContent = "Fill the field";
}
});
// event after clicking on the task list
document.getElementById("taskList").addEventListener("click", function (e) {
//remove the clicked list element
this.removeChild(e.target);
});
document.getElementById("printButton").addEventListener("click", function () {
const printArea = document.getElementById("forPrinting").innerHTML;
//we set the print area only for the elements of our task list
document.body.innerHTML = printArea;
//print window
window.print();
//refresh the entire page
window.location.reload();
});

Add Comment

Please, Sign In to add comment