在主题中，我的工作是编写一个代码，用户在文本框中写入一些文本，当用户点击回车键时，文本框中的文本应该添加到Things标题下的ul列表中。我还添加了重置按钮，但它不起作用，因为向列表中添加元素不起作用。但我认为当我修复它时，它应该起作用。我不知道我在哪里犯了错误。有人能帮我或给我建议吗？我该怎么办？
<!DOCTYPE html>
<html>
<head>
<title>List</title>
</head>
<body>
<h1 id="title">List</h1>
<form>
<input type="text" id="user-todo" placeholder="List" required>
</form>
<h2 id="todo-header">Things</h2>
<ul id="list">
</ul>
<button id="clear">Reset</button>
<script>
var input = document.getElementById("user-todo");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
// what happens when user hits ENTER
$(document).ready(function() {
$('ul').append("<li>"+($('#user-todo').val()) + "</li>");
});
}
});
function clear() {
document.getElementById("list").innerHTML = '';
}
</script>
</body>
</html>
看起来你上的是一门过时的课程，你可以在上学习现代JS
https://exploringjs.com/impatient-js/
https://phoenix35.js.org/
放弃使用JQuery，这是一个如今不再必要的框架，你会得到：
const input = document.querySelector("#user-todo");
const clear = document.querySelector("#clear");
const list = document.querySelector("#list");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
const li = document.createElement("li");
li.textContent = input.value;
input.value = "";
list.appendChild(li);
}
});
clear.addEventListener("click", function() {
list.innerHTML = "";
});<!DOCTYPE html>
<html>
<head>
<title>List</title>
</head>
<body>
<h1 id="title">List</h1>
<form onsubmit="return false;">
<input type="text" id="user-todo" placeholder="List" required>
</form>
<h2 id="todo-header">Things</h2>
<ul id="list"></ul>
<button id="clear">Reset</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>List</title>
</head>
<body>
<h1 id="title">List</h1>
<input type="text" id="user-todo" placeholder="List" required>
<h2 id="todo-header">Things</h2>
<ul id="list">
</ul>
<button onclick="clearFunction()">Reset</button>
<script>
function clearFunction() {
document.getElementById("list").innerHTML = " ";
}
var input = document.getElementById("user-todo")
var list = document.getElementById("list");
input.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
var input_val = document.getElementById("user-todo").value;
let li = document.createElement("li");
li.innerText = input_val;
list.append(li);
}
});
</script>
</body><!DOCTYPE html>
<html>
<head>
<title>List</title>
</head>
<body>
<h1 id="title">List</h1>
<form onsubmit="return false;">
<input type="text" id="user-todo" placeholder="List" required>
</form>
<h2 id="todo-header">Things</h2>
<ul id="list"></ul>
<button id="clear">Reset</button>
<script>
var input = document.getElementById("user-todo");
var list = document.getElementById("list");
var reset = document.getElementById("clear");
input.addEventListener("keyup", function(event) {
console.log('keyCode is ' + event.keyCode);
if (event.keyCode === 13) {
var item = document.createElement('LI');
item.innerHTML = input.value;
list.appendChild(item);
}
});
reset.addEventListener("click", function(event) {
list.innerHTML = '';
});
</script>
</body>
</html>
如果您更改这一行，它应该可以工作。https://codesandbox.io/s/exciting-sinoussi-ckw8b?file=/index.html
input.addEventListener("keydown", function (event) {