gpt4 book ai didi

javascript - “Li”元素显示为 `undefined`

转载 作者:行者123 更新时间:2023-12-01 00:33:21 27 4
gpt4 key购买 nike

开始自己做一个todo list来练习JS

当我将文本/任务添加到待办事项时,HTML 文本显示 -

Undefined

确保 getElementbyId 等正确,但不确定是否缺少某些内容。设计很垃圾,只是想尝试一下 JS。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>To doist</title>
</head>
<body>
<div class= "main-title-bar">
<h1>To doist</h1>
</div>
<div id = "button">
<button>+</button>
</div>
<div class = "input" id = "input">
<input type="text" class="add_tast" placeholder="Task">
<span onclick="newElement()" onkeypress="newElement()" class="addBtn">Add</span>
</div>
<div class = "todo-list">
<ul id="myUL">

</ul>
</div>
<script src="js/app.js"></script>
</body>
</html>

JavaScript

//Click button to get input field

let button = document.getElementById('button')

button.addEventListener("click",showInput)

function showInput(event){
if(event.type === "click"){
input.classList.toggle("show")
}
}
const input = document.querySelector(".input")

// Create new element for the classList

function newElement(){
let li = document.createElement("li");
let inputValue = document.getElementById("input").value;
let t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === ''){
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("input").value = "";
console.log('Is it working?');
}

期望在 HTML 上看到我的任务名称,例如“去健身房”

最佳答案

您已将 id="input" 赋予 div 而不是 input 元素。为输入提供 id,它将起作用

let button = document.getElementById('button')

button.addEventListener("click",showInput)

function showInput(event){
if(event.type === "click"){
input.classList.toggle("show")
}
}
const input = document.querySelector(".input")

function newElement(){
let li = document.createElement("li");
let inputValue = document.getElementById("input").value;
let t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === ''){
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("input").value = "";
console.log('Is it working?');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>To doist</title>
</head>
<body>
<div class= "main-title-bar">
<h1>To doist</h1>
</div>
<div id = "button">
<button>+</button>
</div>
<div class = "input" >
<input type="text" id = "input" class="add_tast" placeholder="Task">
<span onclick="newElement()" onkeypress="newElement()" class="addBtn">Add</span>
</div>
<div class = "todo-list">
<ul id="myUL">

</ul>
</div>
<script src="js/app.js"></script>
</body>
</html>

关于javascript - “Li”元素显示为 `undefined`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58337354/

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