如何将项目添加到列表？仅使用 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

正确获取列表('list')，不正确(list)
将字段传递给函数，而不是一些字符串 - 你可以传递 'inputField' 但你还需要 var value = document.getElementById(inputField).value 并且有 "return addItem('list', 'inputItem')"
return 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>

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

How do I add items to a list? using only onsubmit <form>

javascript

html

onsubmit