新手开发者求助：待办列表App提交按钮无法获取输入内容

你的代码里存在几个关键错误，导致点击Submit按钮无法获取输入内容，以下是问题点和修复方案：

问题分析 #

• HTML结构错误：按钮被错误包裹在<div>标签内，正确的按钮标签不需要外层<div>包裹。
• Meta标签语法错误：<meta charset=""utf-8>多了一个多余的引号，导致编码设置无效。
• JavaScript大小写问题：JS是大小写敏感语言，你创建的变量是listItems，但赋值时误写为ListItems。
• 输入值获取错误：你错误地尝试从列表容器listArea获取value，实际上应该从输入框inputField获取输入内容。
• 语义化缺失：<li>标签必须嵌套在<ul>或<ol>中，直接放在<div>里不符合HTML规范，也会影响列表的默认显示样式。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>To-Do List</title>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <style>
        #interface {
            background-color: rgb(220, 216, 216);
        }
    </style>
</head>
<body class="container" id="interface">
    <h1>To-Do List</h1>
    <h2>By Thabo Mtetwa</h2>
    <h4 id="description">From office tasks, to household chores, and personal memos - this to-do list is a great way to keep track of them all.</h4>     
    <div class="container">
        <h3>Item</h3>
        <input type="text" id="item-input" placeholder="Add item here">
        <br><br>
        <button type="button" class="btn btn-primary" id="submit">Submit</button>
        <div id="todo-container">
            <ul id="todo-list"></ul>
        </div>
    </div>
    <script>
        let inputField = document.getElementById("item-input");
        let addButton = document.getElementById("submit");
        let todoList = document.getElementById("todo-list");

        addButton.addEventListener("click", function() {
            const inputValue = inputField.value.trim();
            if (!inputValue) return;
            
            var listItem = document.createElement("li");
            listItem.innerText = inputValue;
            todoList.appendChild(listItem);
            inputField.value = "";
        });
    </script>
</body>
</html>

额外优化：添加了输入内容为空时不创建列表项的判断，以及添加完成后清空输入框的功能，提升用户体验。

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