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

正确获取列表（＆＃39;列表＆＃39;），而不是（列表）
将字段传递给函数，而不是字符串 - 您可以传递＆＃39; inputField＆＃39;但是你还需要var value = document.getElementById(inputField).value并拥有"return addItem('list', 'inputItem')"
返回false或使用preventDefault不提交真实的表单

＆＃13;

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
}

＆＃13;

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

＆＃13;

不显眼：

＆＃13;

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();
}

＆＃13;

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

＆＃13;

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

1 个答案: