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

问题描述 投票：2回答：3

测试代码时，按“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>
...

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

任何建议都会有帮助。

javascript html
3个回答
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);
1
投票

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

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

可能的解决方案是

  • 删除表单（改为使用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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.