初学开发求助：简易To-Do List核心功能失效且页面自动刷新

你的代码存在三个关键问题，直接导致功能失效：

1. 表单提交触发页面刷新 #

按钮的type="submit"会默认触发表单提交行为，导致页面强制刷新，无法保留添加的内容。必须在点击事件中阻止这个默认操作。

2. DOM元素被错误覆盖，标签使用逻辑混乱 #

你创建了<ul>元素后，立刻将变量重新赋值为输入框的文本内容，直接丢失了刚创建的DOM元素引用。此外，单个待办项应该用<li>标签，<ul>是整个列表的容器，需要先固定这个容器再往里面添加待办项。

3. JS文件引入属性错误 #

<script>标签引入外部JS文件必须使用src属性，而非href，否则浏览器无法加载你的JS代码。

修正后的完整代码： #

HTML部分

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>la lista</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" href="list-style.css"/>
    </head>
    <body>
        <main>
            <h1>Ysmael's To-Do List</h1>
            <h3>Input your activities</h3>
            <form>
                Input something<input type="text" required id="toDoInput" placeholder="Input your stuff"/><button id="addButton" type="submit">+</button>
            </form>
            <!-- 固定ul作为待办列表容器 -->
            <ul id="toDoList">
            </ul>
        </main>
        <!-- 修正为src属性引入JS -->
        <script src="todolist.js"></script>
    </body>
</html>

JS部分

let addToButton = document.getElementById('addButton');
let inputFieldset = document.getElementById('toDoInput');
let toDoContainer =  document.getElementById('toDoList');

addToButton.addEventListener('click', function(e){
    // 阻止表单提交默认行为，避免页面刷新
    e.preventDefault();
    // 过滤空输入
    const inputValue = inputFieldset.value.trim();
    if(!inputValue) return;
    
    // 创建单个待办项li
    let toDoItem = document.createElement('li');
    toDoItem.textContent = inputValue;
    // 将待办项添加到列表容器
    toDoContainer.append(toDoItem);
    
    // 清空输入框，方便后续输入
    inputFieldset.value = '';
})

修改后点击按钮即可正常添加待办项，页面不会再刷新，同时新增了空输入过滤和输入框清空的优化逻辑。

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