JavaScript实现待办任务按分类设文本颜色时的类型错误求助

错误原因分析 #

这个报错的核心是你尝试访问一个null对象的style属性，通常分两种情况：

• JavaScript代码在DOM元素加载完成前就执行了，导致document.getElementById等选择器返回null
• DOM元素的ID/选择器拼写错误，找不到对应元素

修复后的完整实现代码 #

HTML部分 #

<!DOCTYPE html>
<html>
<head>
    <title>待办任务APP</title>
    <style>
        .task-item {
            margin: 8px 0;
            padding: 8px;
            border: 1px solid #eee;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="taskInput" placeholder="输入任务内容">
        <select id="taskCategory">
            <option value="Personal">Personal</option>
            <option value="Work">Work</option>
        </select>
        <button onclick="addTask()">添加任务</button>
    </div>
    <div id="taskList"></div>

    <script>
        function addTask() {
            const taskInput = document.getElementById('taskInput');
            const categorySelect = document.getElementById('taskCategory');
            const taskList = document.getElementById('taskList');

            if (!taskInput.value.trim()) return;

            // 创建任务元素
            const taskItem = document.createElement('div');
            taskItem.className = 'task-item';
            taskItem.textContent = taskInput.value;

            // 根据分类设置文本颜色
            switch(categorySelect.value) {
                case 'Personal':
                    taskItem.style.color = 'blue';
                    break;
                case 'Work':
                    taskItem.style.color = 'red';
                    break;
            }

            // 添加到任务列表
            taskList.appendChild(taskItem);

            // 清空输入
            taskInput.value = '';
            categorySelect.selectedIndex = 0;
        }
    </script>
</body>
</html>

关键修复点说明 #

• 确保DOM加载完成后执行代码：脚本放在</body>标签前，此时所有DOM元素都已加载完成，不会出现找不到元素的情况。如果你的代码必须放在<head>里，要用DOMContentLoaded事件包裹：

document.addEventListener('DOMContentLoaded', function() {
    // 这里写你的业务代码
});

• 避免选择器错误：确保代码中使用的ID（比如taskInput、taskCategory）和HTML中的元素ID完全一致，大小写也要匹配。
• 直接操作新创建的元素：代码在创建任务元素后直接设置其style.color，不需要再通过选择器查找，从根源避免了找不到元素的问题。

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