javascript - 如何将项目添加到列表中？仅使用 onsubmit <form>

Question

我正在使用 Javascript/HTML 创建一个待办事项列表。如何使用 <form> 中的 onsubmit 将文本输入添加到列表中。这就是我到目前为止所得到的。

<h1>To-Do List</h1>

<form onsubmit= "return addItem(document.getElementById(list), inputText)"> ` 
    <input type="text" id="inputItem" placeholder="Enter a Task">
    <input type="submit">

</form>

<ul id="list">

</ul>

<script 
// adds Task to list

function addItem(list, inputText) {
    var listItem = document.createElement("li");
    listItem.innerText = "inputText";

    list.appendChild(listItem)

</script>

Answer 1

1. 正确获取列表('list')，而不是(list)
2. 将字段传递给函数，而不是某个字符串 - 您可以传递“inputField”，但您还需要 var value = document.getElementById(inputField).value 并具有 "return addItem('list', 'inputItem')"
3. 返回 false 或使用 PreventDefault 不真实提交表单

function addItem(list, inputField) { 
  var list = document.getElementById(list);
  var listItem = document.createElement("li");
  listItem.innerText = inputField.value; // passed the field. 
  list.appendChild(listItem);
  return false; // stop submission
}

<h1>To-Do List</h1>

<form onsubmit="return addItem('list', this.inputItem)"> 
  <input type="text" id="inputItem" placeholder="Enter a Task">
  <input type="submit">

</form>

<ul id="list">

</ul>

不引人注目:

window.onload = function() {
  document.getElementById('form1').onsubmit = function() {
    var list = document.getElementById(this.getAttribute('data-list')); // only needed if more than one form or list
    var listItem = document.createElement("li");
    var inputItem = this.inputItem;
    listItem.innerText = inputItem.value;
    list.appendChild(listItem);
    inputItem.select();
    inputItem.focus();
    return false; // stop submission
  }
  document.getElementById("inputItem").focus();
}

<h1>To-Do List</h1>

<form id="form1" data-list="list">
  <input type="text" id="inputItem" placeholder="Enter a Task">
  <input type="submit">
</form>
<ul id="list"></ul>