Question

我是一名JavaScript初学者，我在使用简单的待办事项列表时遇到了麻烦。单击该按钮时，它应调用todoList函数，并将该项添加到无序列表中。这是我的HTML代码：

    function todoList(){
      var item = document.getElementById('todoInput').value
      var text = document.createTextNode(item)
      var newItem = document.createElement('li')
      newItem.appendChild(text)
      document.getElementById('todoList').appendChild(newItem)
    }

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>To Do List</title>
        <link rel="stylesheet" href="css/styles.css" type="text/css">
      </head>
      <body>
        <h1>To Do List</h1>
        <form id="todoForm">
          <input id="todoInput">
          <button type="button" onclick="todoList()">Add Task</button>
        </form>
        <ul id="todoList">
        </ul>
        <script type="text/javasript" src="index.js"></script>
      </body>
    </html>

这是我的todoList功能。

当我输入一个项目并单击该按钮时，我在控制台中收到一个未被捕获的typeError。我在这里做错了什么？

Answer 1

这将有效

<!DOCTYPE html>
<html>
  <head>
    <script>
function todoList(){
  var item = document.getElementById('todoInput').value
  var text = document.createTextNode(item)
  var newItem = document.createElement('li')
  newItem.appendChild(text)
  document.getElementById('todoList').appendChild(newItem)
}
</script>

    <meta charset="UTF-8">
    <title>To Do List</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css">
  </head>
  <body>
    <h1>To Do List</h1>
    <form id="todoForm">
      <input id="todoInput">
      <button type="button" onclick="todoList()">Add Task</button>
    </form>
    <ul id="todoList">
    </ul>
  </body>
</html>

文本不显示在列表中 - TypeError

1 个答案: