CODEWITHSUNDEEP
javascripthtmlcss
Paulo Schinzel
Paulo Schinzel

Reputation: 15

DOM manipulation JavaScript - Creating a function for each item of an array

I am starting out with studying JS and in my online course there is an exercise that is really confusing me.

We have a simple list, to which we can add items and now our job is to make it so that when a list element is clicked, it adds a class, basically "crossing out" the item.

So, my problem is, i am caching my <li> elements in a var in my script.js. When i use the .addEventListener to this var, to listen for the mouse clicks, my console spits out an error. I know why this is happening, basically because the <li> items in my var are stored inside of an array. So i really don't understand how to make this work - How do i use the .addEventListener("click", classList.add("done")) ? How do i make it so that the <li> items are targeted individually, on mouse click? Thank you very much for any help! *Vanilla JS only please ;) Here's the code so far: 

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var li = document.getElementsByTagName("li");


//Make sure input field is not empty
function inputLength() {
    return input.value.length;
}

//Add a list element from the user's input
function createListElement() {
    var li = document.createElement("li");
        li.appendChild(document.createTextNode(input.value));
        ul.appendChild(li);
        input.value = "";
}

//Add it through clicking
function addListAfterClick() {
    if (inputLength() > 0) {
        var li = document.createElement("li");
        createListElement();
        } 
}

//Add it through pressing Enter
function addListAfterKeyPress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    } 
}

button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeyPress);

//* THIS IS THE PROBLEM *
li.addEventListener("click", classList.add("done"));
.done {
  text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>JavaScript + DOM</title>
</head>

<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="Enter Items">
    <button id="enter">Enter</button>

    <ul>
        <li>Notebook</li>
        <li>Jello</li>
        <li>Spinach</li>
        <li>Rice</li>
        <li>Birthday Cake</li>
        <li>Candles</li>
    </ul>
    

<script type="text/javascript" src="script.js"></script>
    
</body>
</html>

Upvotes: 0

Views: 641

Answers (2)

Onuralp Karataş
Onuralp Karataş

Reputation: 196

use this. e.target get the item you clicked within the ul with target and because you wanted to catch it when you hit li, you used the e.target.tagName feature of the element you clicked.

ul.addEventListener("click", function(e) {
    if(e.target.tagName === "LI") {
        e.target.classList.add("done");  
    }
});

Upvotes: 1

jvdmr
jvdmr

Reputation: 715

You need to loop over the array. Use li.forEach(function (item) { ... });

You also need to put the li.addEventListener(...) line in the function where you create those items.

Upvotes: 0

Related Questions