抱歉，我是一名学生，我无法弄清楚我的代码有什么问题!当我单击按钮时，绝对没有任何反应。我尝试隔离每个功能，但仍然没有任何反应。我已经检查了很长时间试图找到丢失的标签或丢失的括号或圆括号或其他东西，但我没有找到它。它的目的是创建一个迷你博客模拟。您应该能够使用第一个函数将条目添加到列表顶部，并且应该能够使用第二个函数删除您选择的条目。感谢您的帮助!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 5 Activity</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Awesome NBA Blog! Each day, a sentence about the feats of a different legend!</h1>
<ol id="playerEntries">
<li>Michael Jordan: 6 Championship rings in 6 NBA Finals appearances.</li>
<li>Bill Russell: 11 time champion in a 13 year career, including one as a player/head coach.</li>
<li>Kobe Bryant: 5 Championships, 18-time All-Star.</li>
<li>Lebron James: Won a Championship and was the Finals MVP with 3 different teams.</li>
</ol>
<form action="">
Add a new entry:
<input type="text" name="newEntry" id="newEntrySpot" size="80">
<input type="submit" value="Submit" onclick="addEntry()"><br>
Delete an entry(which entry would you like to delete?)
<input type="number" name="entryNum" id="numToDelete">
<input type="button" value="Delete" onclick="deleteEntry()"><br>
</form>
<script type="text/javascript">
function addEntry() {
var newEntry = document.getElementById("newEntrySpot").value;
var newestEntry = document.createElement("li");
newestEntry.innerHTML = newEntry;
var blogList = document.getElementsByTagName("ol")[0];
var topEntry = document.querySelectorAll("#playerEntries li")[0];
blogList.insertBefore(newestEntry, topEntry);
}
function deleteEntry() {
var num2Delete = document.getElementsByName("entryNum")[0].value;
var blogList = document.getElementsByTagName("ol")[0];
var howManyEntries = blogList.length;
if (howManyEntries >= 1) {
var postToDelete = blogList[num2Delete - 1];
var deletedPost = blogList.removeChild(postToDelete);
}
}
</script>
</body>
</html>
最佳答案
你必须更换
<input type="submit" value="Submit" onclick="addEntry()"><br>
与
<input type="button" value="Submit" onclick="addEntry()"><br>
否则将提交表单并重新加载页面。您还可以使用表单的提交功能，但必须使用preventDefault。
此外，为了使deleteEntry函数正常工作，您不能使用document.getElementsByTagName("ol")[0];，因为您不能使用.length在一个元素上。这是另一种方法:
function deleteEntry() {
var num2Delete = document.getElementsByName("entryNum")[0].value;
var blogList = document.querySelectorAll("ol > li");
var howManyEntries = blogList.length;
if (howManyEntries >= 1) {
var postToDelete = blogList[num2Delete - 1];
postToDelete.remove();
}
}
关于javascript - 为什么这段 JavaScript 代码没有执行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64846210/