时间戳

首页 > 解决方案 > “未捕获的类型错误：无法读取未定义的属性（读取 'appendChild'）”，当变量被明确定义时

javascript - “未捕获的类型错误：无法读取未定义的属性（读取 'appendChild'）”，当变量被明确定义时

问题描述

通过我的高中学习 JavaScript 和 HTML 编码。我无法弄清楚为什么这个错误会在我的一生中发生。有人可以帮我弄这个吗？非常感谢！

为清楚起见分配： 仅使用 JavaScript，将列表项添加到日历中，您需要从杂务列表中完成该列表项。

代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        td{
            height: 150px;
            width: 150px;
        }
    </style>
</head>
    <body>
        <table border = "1" id= "chores">
            <tr id = "days">
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
            </tr>
            <tr id = "tasks">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <script>
        
            var extraTask = document.createElement("li");
            extraTask.innerHTML = "Take dishes out of dishwasher";

            var extraTaskList = document.createElement("ul");
            extraTaskList.child = extraTask;

            var tasksRow = document.getElementById("tasks").children;
            tasksRow = tasksRow[3];
            
            var tableContainer = document.getElementById("chores");
            
            
            document.tasksRow.appendChild(extraTaskList);
            
        </script>
    </body>
</html>

代码创建的视觉效果： https ://i.stack.imgur.com/GEUZG.png

标签： javascripthtml

解决方案

更改document.tasksRow为tasksRow。

此外，用于appendChild附加元素。

<!DOCTYPE html>
<html>
<head>
    <style>
        td{
            height: 150px;
            width: 150px;
        }
    </style>
</head>
    <body>
        <table border = "1" id= "chores">
            <tr id = "days">
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
            </tr>
            <tr id = "tasks">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <script>
        
            var extraTask = document.createElement("li");
            extraTask.innerHTML = "Take dishes out of dishwasher";

            var extraTaskList = document.createElement("ul");
            extraTaskList.appendChild(extraTask);

            var tasksRow = document.getElementById("tasks").children;
            tasksRow = tasksRow[3];
            
            var tableContainer = document.getElementById("chores");
            
            
            tasksRow.appendChild(extraTaskList);
            
        </script>
    </body>
</html>

推荐阅读