我想制作一个待办事项列表，但我被困在开始时，我在这个代码中哪里出错了?

我想使用用户在输入区域中输入的值将li添加到ul元素中。这是我在控制台中遇到的错误：

[Error] TypeError: document.getElementsByClassName("list-group").appendChild is not a function. (In 'document.getElementsByClassName("list-group").appendChild("li")', 'document.getElementsByClassName("list-group").appendChild' is undefined)
additem (script.js:7)

//this is my javascript code-->
function additem() {
var task = document.getElementsByClassName("input-group-text").value;

var li = document.createElement("li");
li.classList.add("list-group-item");
li = "task";
document.getElementsByClassName("list-group").appendChild("li");
}
document.getElementById("button").addEventListener("click",additem);

//<--!this is my html code-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LearnCodeOnline</title>
<link rel="stylesheet" href="./style.css" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
</head>
<body class="bg-dark">
<div class="container bg-warning p-4">
<h1 class="text-center">LearnCodeOnline</h1>
<div class="input-group">
<span class="input-group-text">todo</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>

<button id="button" class="float-right">Add</button>

<ul class="list-group">
<li class="list-group-item">An item</li>
</ul>

<!-- <button
type="button"
class="btn btn-success btn-lg mt-4 mx-auto d-block sort-btn"
>
Sort courses
</button> -->
</div>
</body>
</html>

JS：-

function additem() {
var task = document.getElementsByClassName("form-control")[0].value;

var li = document.createElement("li");
li.classList.add("list-group-item");
li.innerText = task;
document.getElementsByClassName("list-group")[0].appendChild(li);
}
document.getElementById("button").addEventListener("click",additem);

而不是做.appendChild("li")，我们将给它一个元素而不是字符串，因为它接受元素而不是字符串
getElementsByClassName()返回一个数组，因此我们将在它所在的两个函数中将该项目放在数组的第 0 个索引处
此外，我们不必像这样设置li = "task"，而是必须按li.innerText = task设置其文本

相关内容

最新更新

热门标签：