Question

我从学习JS开始，在我的在线课程中，有一项练习确实使我感到困惑。

我们有一个简单的列表，可以在其中添加项目，现在我们要做的就是使它成为一个对象，这样，当单击列表元素时，它会添加一个类，基本上是“划掉”该项目。

所以，我的问题是，我将<li>元素缓存在script.js中的var中。当我在此.addEventListener上使用var来监听鼠标单击时，我的控制台会显示一个错误。我知道为什么会这样，基本上是因为<li>中的var个项目存储在数组中。所以我真的不明白如何使这项工作-我如何使用.addEventListener("click", classList.add("done"))？我如何才能使<li>项在鼠标单击时被分别定位？非常感谢您的帮助！ *仅请使用Vanilla JS;）到目前为止，这是代码：

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>

Answer 1

使用此。 e.target获得具有目标的ul中您单击的项目，并且由于您想在点击li时捕获它，因此您使用了单击元素的e.target.tagName功能。

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

Answer 2

您需要遍历数组。使用li.forEach(function (item) { ... });

您还需要在创建这些项目的函数中放置li.addEventListener（...）行。

DOM操作JavaScript-为数组的每个项目创建一个函数

2 个答案: