"Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild')&quot-CodePudding

Learning JavaScript and HTML coding through my Senior Highschool year. I cannot figure out why this error is occurring for the life of me. Can someone help me with this? Thank you so much!

Assignment for clarity: Using only JavaScript, add a list item to the Calendar that you need to complete from your list of chores.

Code:

<!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>

The visual created by the code: https://i.stack.imgur.com/GEUZG.png

CodePudding user response：

Change document.tasksRow to tasksRow.

Also, use appendChild to append an element.

<!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>