gpt4 book ai didi

javascript - "How do I add items to a list and then add to the empty space below?"

转载 作者:可可西里 更新时间:2023-11-01 12:54:46 29 4
gpt4 key购买 nike

测试代码时,任何输入到列表中的值在按下“enter”后都会消失。

我对编程和网络开发非常陌生。请具体一点,以便我理解。

function addItem(){
var item = document.getElementsByID("toDoInput").value;
var text = document.createTextNode("item");
var li = document.createElement("li");
newItem.appendChild(text);
document.getElementsByID("Ordered List").appendChild(newItem);
}



...
<head>
<link rel= "stylesheet" href = "styles.css">
</head>
<body>
<h1> To Do List </h1>
<form id = "toDoForm">
<input type = "text" id = "toDoInput">
<button type = "button" onclick = "addItem()"> Click Me </button>
</form>
<ul id = "Ordered List"></ul>
<script src="toDoList.js"></script>
...

我希望当我在列表中输入一个词时,它会出现在下方。相反,它消失了。

任何建议都会有所帮助。

最佳答案

您的代码大部分是正确的。

但是,它有一些错误:

  • document.getElementsByID 无效。这是document.getElementById
  • newItem 未声明。我想你的意思是 li 这里

这两个问题都会导致错误,使您的函数过早停止执行。您应该熟悉浏览器开发人员工具中的控制台,您会看到它会在那里记录错误。

另外:

  • document.createTextNode("item") 创建一个只有文本“item”的文本节点。您需要改用输入框中的值。
  • 您应该监听 submit 事件,而不是 onclick 事件。
    • 不幸的是,您必须在 onsubmit 上调用 preventDefault 以防止页面导航到其他地方
    • 您可以使用按钮从表单触发提交事件,方法是将按钮类型设置为submit

这是您的代码的工作版本:

function addItem(event) {
event.preventDefault(); // don't let the form POST
const input = document.getElementById("toDoInput");
const text = document.createTextNode(input.value);
const li = document.createElement("li");
li.appendChild(text);
document.getElementById("orderedList").appendChild(li);
input.value = "";
}
<h1>To Do List</h1>
<form id="toDoForm" onsubmit="addItem(event)">
<input type="text" id="toDoInput">
<button type="submit">Click Me</button>
</form>
<ul id="orderedList"></ul>

或者,这是更好的做法,根本不要在标记上使用 onsubmit 并使用 addEventListener 绑定(bind)事件:

document.getElementById("toDoForm").addEventListener("submit", addItem);

关于javascript - "How do I add items to a list and then add to the empty space below?",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55927102/

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