gpt4 book ai didi

javascript - 如何从 JavaScript 列表中删除新项目?

转载 作者:行者123 更新时间:2023-11-30 20:16:04 26 4
gpt4 key购买 nike

我是 JavaScript 的新手,我列了一个 list 。您可以在列表中添加新项目,您可以从列表中删除项目,还有一些用于文本装饰的 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)

最佳答案

嘿,你把一些代码放错地方了,btn = document.querySelectorAll("按钮"); 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 - 如何从 JavaScript 列表中删除新项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51906221/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com