DOM Event Handling

DOM Event Handling
0

#1

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

  • array, but I can’t get it. I’ve been working on this the whole day and I failed over and over to find a solution.

    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!


  • #2

    It sounds like you might need to add an Event Listener to the newly created element.


    #3

    You need to add whatever events are bound to existing list elements when the page renders -> to all newly created list elements as well.

    Needs to be present within createListElement().


    #4

    Understood it perfectly, thank you guys!!


    #5

    You’re very welcome ; )