Question

我是JavaScript的新手，并列出了清单。您可以在列表中添加新项目，也可以从列表中删除项目，并且它还有一些用于装饰文字的CSS。

我有一个问题，我无法从列表中删除新项目，只能从列表中删除旧项目。如果添加新项目，我将无法删除

这是代码：

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var liEl = document.getElementsByTagName("li");
var btn = document.querySelectorAll("button");
var btnLength = btn.length;

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    var delBtn = document.createElement("button");
    li.appendChild(document.createTextNode(input.value + " "));
    delBtn.appendChild(document.createTextNode("Delete"));
    ul.appendChild(li);
    li.appendChild(delBtn);
    btnLength++;
    btn[btnLength].addEventListener("click", clearItem);
    input.value = "";
}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress(theEvent) {
    if (inputLength() > 0 && theEvent.keyCode === 13) {
        createListElement();
    }
}

function changeClass() {
    this.classList.toggle("done");
}

function clearItem() {
    this.parentNode.remove();
}

button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

eventChangeClass();

eventClearItem();

function eventChangeClass() {
    for (var i = 0; i < liEl.length; i++) {
    liEl[i].addEventListener("click", changeClass);
    }
}

function eventClearItem() {
    for (var i = 1; i < btnLength; i++) {
        btn[i].addEventListener("click", clearItem);
    }
}

.done {
    text-decoration: line-through;
}

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript + DOM</title>
    <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="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul>
        <li class="bold red" random="23">Notebook <button>Delete</button></li>
        <li>Jello <button>Delete</button></li>
        <li>Spinach <button>Delete</button></li>
        <li>Rice <button>Delete</button></li>
        <li>Birthday Cake <button>Delete</button></li>
        <li>Candles <button>Delete</button></li>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

这是错误：

Uncaught TypeError: Cannot read property 'addEventListener' of undefined
at createListElement (script.js:20)
at HTMLButtonElement.addListAfterClick (script.js:26)

Answer 1

嘿，您在错误的位置放置了一些代码， btn = document.querySelectorAll("button"); btn[btnlength].addEventListener("click", clearItem);，我将其更改为btn[btn.length].addEventListener("click", clearItem) 您忘记了使用新按钮，只在页面加载时初始化btn，因此，每次添加新的删除按钮时，都不会将其添加到btn数组中。并且您仅在初始阶段使用btnlength，因此btn长度会有所不同。每次需要重新初始化btn长度时。我已修复并添加了一个代码段。请检查一下。

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var liEl = document.getElementsByTagName("li");
var btn = document.querySelectorAll("button");
var btnLength = btn.length;

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    var delBtn = document.createElement("button");
    li.appendChild(document.createTextNode(input.value + " "));
    delBtn.appendChild(document.createTextNode("Delete"));
    ul.appendChild(li);
    li.appendChild(delBtn);
    btn = document.querySelectorAll("button");
    btnLength++;
   
    btn[btn.length -1].addEventListener("click", clearItem);
    input.value = "";
}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress(theEvent) {
    if (inputLength() > 0 && theEvent.keyCode === 13) {
        createListElement();
    }
}

function changeClass() {
    this.classList.toggle("done");
}

function clearItem() {
    this.parentNode.remove();
}

button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

eventChangeClass();

eventClearItem();

function eventChangeClass() {
    for (var i = 0; i < liEl.length; i++) {
    liEl[i].addEventListener("click", changeClass);
    }
}

function eventClearItem() {
    for (var i = 1; i < btnLength; i++) {
        btn[i].addEventListener("click", clearItem);
    }
}

.done {
    text-decoration: line-through;
}

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript + DOM</title>
    <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="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul>
        <li class="bold red" random="23">Notebook <button>Delete</button></li>
        <li>Jello <button>Delete</button></li>
        <li>Spinach <button>Delete</button></li>
        <li>Rice <button>Delete</button></li>
        <li>Birthday Cake <button>Delete</button></li>
        <li>Candles <button>Delete</button></li>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

如何从JavaScript列表中删除新项目？

1 个答案: