TodoList应用开发问题：待办事项数组存储与DOM渲染功能实现受阻

我帮你排查了代码里的几个关键问题，现在给出修复后的完整代码，同时解释每个修改点：

核心问题分析 #

• 作用域错误：你把newTodo、drawtodo和todos数组都放在newElement函数内部，导致全局环境（HTML按钮的onclick）无法访问这些函数，而且每次调用newElement都会重置todos数组，根本存不住数据。
• DOM操作错误：drawtodo里的inpvalue.appendChild(newlist)完全错误——inpvalue是字符串，不是DOM元素，应该把创建的<li>追加到目标列表myUL中。
• 未执行初始化代码：newElement函数从未被调用，里面的逻辑根本没启动。

修复后的完整代码 #

HTML代码（仅调整按钮文本，核心结构不变） #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>TodoList</title>
</head>
<body>
<div class="todolist_box">
<h3> To Do List </h3>
<div class="input">
<input type="text" id ="inp" placeholder="Add new Task">
<button onclick="newTodo()" ><i> Add </i></button>
<button onclick="saveTodos()" ><i> Save </i></button>
<button onclick="drawTodo()" ><i> Load </i></button>
</div>
<ul id="myUL">
</ul>
</div>
<script src="script.js" type="application/javascript"></script>
</body>
</html>

JavaScript代码 #

// 把todos数组放在全局作用域，确保数据能持久存储
let todos = [];

// 实现addTodo对应的newTodo功能
function newTodo() {
  const input = document.getElementById('inp');
  const todoText = input.value.trim(); // 去除首尾空格，避免空条目
  
  if (todoText) { // 只有输入非空时才添加
    todos.push(todoText);
    input.value = ''; // 清空输入框
    drawTodo(); // 添加后立即重绘列表
  }
}

// 实现drawTodo功能
function drawTodo() {
  const todoList = document.getElementById('myUL');
  todoList.innerHTML = ''; // 先清空现有列表，避免重复渲染
  
  // 遍历数组，创建每个待办条目
  todos.forEach(todoText => {
    const li = document.createElement('li');
    li.textContent = todoText; // 更简洁的设置文本方式
    todoList.appendChild(li);
  });
}

// 可选：添加本地存储的save功能（对应你HTML里的save按钮）
function saveTodos() {
  localStorage.setItem('todos', JSON.stringify(todos));
  alert('待办事项已保存！');
}

// 页面加载时从本地存储恢复数据
window.onload = function() {
  const savedTodos = localStorage.getItem('todos');
  if (savedTodos) {
    todos = JSON.parse(savedTodos);
    drawTodo(); // 加载后立即渲染
  }
};

关键修改说明 #

1. 调整作用域：把todos数组和核心函数都放在全局作用域，确保HTML按钮能调用到，同时数据不会被重置。
2. 优化输入校验：添加trim()和非空判断，避免添加空的待办条目。
3. 修复DOM操作：drawTodo里先清空列表，然后正确地把每个<li>追加到myUL中，用textContent替代繁琐的createTextNode。
4. 补充save/load功能：利用localStorage实现持久化存储，页面刷新后数据不会丢失，对应你HTML里的save和load按钮。
5. 修正按钮绑定：把原来重复的newTodo按钮改成saveTodos，功能更清晰。

这样你的TodoList就能正常实现添加待办、存储数组、重绘列表的功能啦！

内容的提问来源于stack exchange，提问作者TRicheT