时间戳

首页 > 解决方案 > 我正在尝试在 javascript 中创建一个待办事项列表，但 HTML 没有显示它

javascript - 我正在尝试在 javascript 中创建一个待办事项列表，但 HTML 没有显示它

问题描述

我正在尝试用 javascript 编写待办事项列表，但不知何故它不起作用。

这是我的 JavaScript 和 HTML：

let todos = [] 
function createTodo() {
    let newTodo = {
        text: '',
        checked: 0
    }
    newTodo['text'] = prompt('Item description')
    todos.push(newTodo)
    
}

for (i in todos) {
    let listItem = document.createElement('li')
    let itemText = document.createTextNode(i['text'])
    console.log('itemText: ' + itemText)
    listItem.appendChild(itemText)
    console.log('listItem: ' + listItem)
    document.getElementById('todo-list').appendChild(listItem)
}
<!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="createTodo();">New TODO</button>
      <ul id="todo-list" class="todo-list">
      </ul>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

当我单击待办事项按钮时，它会提示我输入文本，当我在控制台中输入时，它确实显示它已被推送；但是当使用 for 循环进行迭代时，它会在控制台中显示“未定义”，而且它甚至不会出现在 HTML 中。请帮我。

标签： javascripthtml

解决方案

正如我在您的代码中看到的那样，没有地方可以将创建的元素添加到 HTML。当涉及到打开提示时，您应该从输入中获得价值。

这是如何获取输入值并将其反映到 HTML

let todos = []
function createTodo() {
    let newTodo = {
        text: '',
        checked: 0
    }
    newTodo['text'] = prompt('Item description')
    if( newTodo.text != null ) {
        todos.push(newTodo)
        reflectToHtml(newTodo)
    }
}
function reflectToHtml(i) {
    let listItem = document.createElement('li')
    let itemText = document.createTextNode(i['text'])
    listItem.appendChild(itemText)
    document.getElementById('todo-list').appendChild(listItem)
    document.getElementById('item-count').innerText = todos.length
}

推荐阅读