Hey there everyone!
I’ve been working and trying to learn about the DOM and JS Events. I’ve tried to create a simple Shopping List, but I fail at understanding a concept: how can you update the length of the list??
I’ll explain:
The idea is to have some default items that will behave exactly as the new-entry items.
Those items are:
- Notebook
- Jello
- Spinach
- Rice
- Birthday Cake
- Candles
I’ve successfully implemented the behavior for these items, which is just to click on them to mark them as “done” and to click on the delete button to erase them.
Also, whenever you type something inside the box, they get automatically added to the shopping list, with a delete button as well.
The problem comes with the new items: they can’t be marked as “done” nor deleted by clicking on their button.
I know it must be something regarding the for-loop and the length of the
I’ll paste the code here, and I really appreciate the help and effort of the community.
HTML file
<!DOCTYPE html>
<html>
<head>
<title>JavaScript + DOM</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userImput" type="text" placeholder="Enter items" name="">
<button id="enter">Enter</button>
<ul>
<li class="bold red" random="23">Notebook</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>
<!-- JS -->
<script type="text/javascript" src="script.js" sr></script>
</body>
</html>
JavaScript file
var button = document.getElementById('enter');
var input = document.getElementById('userImput');
var ul = document.querySelector("ul");
var deleteButton = document.getElementsByClassName('btn-danger');
// Check whether the user has introduced something
function inputLength() {
return input.value.length;
}
// Creating a <li> Element
function createListElement() {
// Create <li> element
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = "";
// Create <button> element
createDeleteButton(li);
}
// Create <button> element
function createDeleteButton(li) {
var deleteButton = document.createElement("button");
deleteButton.appendChild(document.createTextNode("Delete item"));
deleteButton.classList.add("btn", "btn-danger");
li.appendChild(deleteButton);
}
// Adding a <li> element on click
function addListAfterClick() {
if (inputLength() > 0) {
var li = document.createElement("li");
createListElement();
}
}
// Adding a <li> element on key press
function addListAfterKeypress(event) {
if (inputLength() > 0 && event.keyCode === 13) {
createListElement();
}
}
// Toggling completed task
function completed() {
this.classList.toggle("done");
}
// Deleting items
function deleteItem() {
this.parentElement.remove();
}
// Iterating through all the <li> elements
for (var i = 0; i < ul.children.length; i++) {
createDeleteButton(ul.children[i]);
ul.children[i].addEventListener("click", completed);
deleteButton[i].addEventListener("click", deleteItem);
}
// These two functions must work in some other way, but I can't get how
// ul.children[i].addEventListener("click", completed);
// deleteButton[i].addEventListener("click", deleteItem);
// Events
button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
CSS file
.done {
text-decoration: line-through;
}
.btn-danger {
font-size: 0.7em;
padding: 2px;
margin-left: 20px;
}
Again, thank you guys very much for the help, and sorry if the question seems trivial for you, it’s just that I don’t get it.
Happy coding!