Question

我正在尝试创建待办事项列表单击“新建待办事项”按钮时，屏幕上将显示一个文本字段和提交按钮。但是，当我按下“提交”按钮时，页面看起来就像初始的起始页面。一切都消失了。函数“ newTODO（）”创建文本框并提交按钮。函数“ subitTodo（）”将删除文本框和“提交”按钮，并将该文本框中的文本添加到“ li”元素中。这是代码。

<!DOCTYPE html>
<html>
  <head>
    <title>TODO App</title>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
  </head>
  <body>
    <div class="container center">
      <h1 class="center title">My TODO App</h1>
      <div class="flow-right controls">
        <span>Item count: <span id="item-count">0</span></span>
        <span>Unchecked count: <span id="unchecked-count">0</span></span>
      </div>
      <button class="button center" onClick="newTodo()">New TODO</button>
      <ul id="todo-list" class="todo-list"></ul>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')

function newTodo() {
  //alert('New TODO button clicked!')
  //create a text field and submit button
  var newTODO = document.createElement("LI")
  newTODO.id = 'newTODOListItem'
  list.appendChild(newTODO)

  var form = document.createElement("FORM")
  //form.innerHTML = "Enter a TODO"
  form.id = 'TODOList'
  newTODO.appendChild(form)

  var x = document.createElement("INPUT")
  x.type = 'text'
  x.id = 'newTODOText'
  x.name = 'name1'
  form.appendChild(x)

  var y = document.createElement("INPUT")
  y.type = 'submit'
  y.value = 'Submit'
  y.onClick = 'submitTodo(newTODO, form, x.value)'
  form.appendChild(y)
}

function submitTodo(newTODO, TODOList, taskText) {
  //after submit is clicked
  newTODO.removeChild(TODOList)
  var myP = document.createElement("P")

  newTODO.appendChild(myP)
  myP.innerHTML = taskText
}

Answer 1

有很多问题。

事件是onclick，而不是onClick
您将按钮类型设置为submit，该按钮正在提交表单
您以字符串形式传递了处理程序函数

我在这里使用按钮类型按钮解决了问题。如果要保持按钮类型提交，则必须在表单提交上阻止Default。

const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')

function newTodo() {
  //alert('New TODO button clicked!')
  //create a text field and submit button
  var newTODO = document.createElement("LI")
  newTODO.id = 'newTODOListItem'
  list.appendChild(newTODO)

  var form = document.createElement("FORM")
  //form.innerHTML = "Enter a TODO"
  form.id = 'TODOList'
  newTODO.appendChild(form)

  var x = document.createElement("INPUT")
  x.type = 'text'
  x.id = 'newTODOText'
  x.name = 'name1'
  form.appendChild(x)

  function submitHandler() {
    submitTodo(newTODO, form, x.value)
  }

  var y = document.createElement("INPUT")
  y.type = 'button'
  y.value = 'Submit'
  y.onclick = submitHandler;
  form.appendChild(y)
}

function submitTodo(newTODO, TODOList, taskText) {
  //after submit is clicked
  newTODO.removeChild(TODOList)
  var myP = document.createElement("P")

  newTODO.appendChild(myP)
  myP.innerHTML = taskText
}

<ul id="todo-list"></ul>
<p>
  Item count: <span id="item-count"></span> Unchecked count: <span id="unchecked-count"></span>
</p>
<button onclick="newTodo()">New todo</button>

尝试创建TODO列表，但无法将文本添加到列表中

1 个答案: