logo标签列表

如何将项目添加到列表中并添加到下面的空白处？

javascripthtml
3

在测试代码时，输入列表中的任何值后按“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>
...

我希望当我输入一个单词到列表中时，它会出现在下面。但事实上，它消失了。

有什么建议吗？

你能否为我们创建一个可运行的演示？可以使用JSFiddle或其他方式吗？ - Fallenreaper
1
您的表单正在提交。 - Daniel A. White
3个回答
1

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

但是，它有一些错误：

  • 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绑定事件：

document.getElementById("toDoForm").addEventListener("submit", addItem);
谢谢！这非常有帮助。 - Alice Sloan
1

我认为这是无意的表单提交。

当您在表单中按下回车键时，默认行为是提交表单。然后页面将向服务器创建请求。在您的情况下，没有表单操作属性，因此您将观察到页面重新加载。

可能的解决方案包括：

  • 删除表单（使用 div 替代）
  • 禁用回车键提交表单。以下代码可完成此任务。

    document.getElementById("YOURFORMNAMEHERE").onkeypress = function(e) {
        var key = e.charCode || e.keyCode || 0;
        if (key == 13) {
            e.preventDefault();
        }
    }
1
如果您想防止按下回车键清除并提交表单的操作。 

function addItem() {

  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 = "";
  
  return false;
}
<form id="toDoForm" onsubmit="return addItem()">
  <input type="text" id="toDoInput">
  <button type="button" onclick="addItem()"> Click Me </button>
</form>
<ul id="orderedList"></ul>

谢谢。这解决了回车的问题。 - Alice Sloan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接