Question

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

我对编程和Web开发非常陌生。请具体说明，以便我理解。

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>
...

我希望当我在列表中输入一个单词时，它会显示在下方。相反，它消失了。

任何建议都会有所帮助。

Answer 1

您的代码基本上是正确的。

但是，它有一些错误：

document.getElementsByID无效。是document.getElementById
newItem未声明。我认为您的意思是li在这里

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

另外：

document.createTextNode("item")创建一个仅包含文本“ item”的文本节点。您将改为使用输入框中的值。
您应该在听submit事件，而不是onclick事件。
- 很遗憾，您必须在preventDefault上致电onsubmit，以防止页面导航到其他地方
- 您可以通过将按钮类型设置为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);

Answer 2

我认为这是无意提交的形式。

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

可能的解决方案是：

删除表格（改用div）
在输入时禁用提交。这段代码即可完成工作。


    document.getElementById("YOURFORMNAMEHERE").onkeypress = function(e) {
        var key = e.charCode || e.keyCode || 0;
        if (key == 13) {
            e.preventDefault();
        }
    }

Answer 3

如果您想防止输入键清除和提交表单

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>

“如何将项目添加到列表，然后添加到下面的空白区域？”

3 个答案: