How do I append a new row to the body of a table in HTML using a javascript function that acts on a-CodePudding

I've been using the following resources:

And my HTML code with the javascript function is as follows:

<!doctype html>
<html>
<head>
<h1>Checkbox Test</h1>
</head>
    <body>
        <table  id="checky">
            <thead>
              <tr>
                <th>Checkbox 1</th>
                <th>Checkbox 2</th>
              </tr>
            </thead>
            <tbody>
                <tr>
                  <td><input type="checkbox" name="Team1_checkbox" id="1" onchange="doalert(this)"  /> &nbsp; </td> 
                  <td><input type="checkbox" name="Team2_checkbox" id="2" onchange="doalert(this)" /> &nbsp; </td>
                </tr>
            </tbody>
        </table>
        <script>
            function doalert(checkboxElem) {
              if (checkboxElem.checked) {
              
            var table=document.getElementByID("checky");
            var row=table.insertRow(0);
            
            alert("checked");
            
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);

            cell1.innerHTML = "NEW CELL1";
            cell2.innerHTML = "NEW CELL2";

              } else {
                alert("notchecked");
              }
            }
        </script>
    </body>
</html>

The checkbox when checked does nothing but when unchecked it does display the alert, so I'm not quite sure what the issue is.

CodePudding user response：

In JavaScript, function names are case sensitive. You have bug in line:

 var table=document.getElementByID("checky");

Should be:

 var table=document.getElementById("checky");

Change function name getElementByID -> getElementById.

Correct this small bug and everything will work.

CodePudding user response：

Your error is trying to return. this returning only this will return the input element and that is not what you want to get, what you want to return is this.checked which will return true or false depending on the if the checkbox is checked or not

I have rewritten your find the changes below

<!doctype html>
<html>

<head>
    <h1>Checkbox Test</h1>
</head>

<body>
    <table  id="checky">
        <thead>
            <tr>
                <th>Checkbox 1</th>
                <th>Checkbox 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="Team1_checkbox" id="1" onchange="doalert(this.checked)" /> &nbsp; </td>
                <td><input type="checkbox" name="Team2_checkbox" id="2" onchange="doalert(this.checked)" /> &nbsp; </td>
            </tr>
        </tbody>
    </table>
    <script>
        function doalert(checkboxElem) {

            // console.log(checkboxElem);
            if (checkboxElem) {
              //correct the getElementByID
                var table = document.getElementById("checky");
                var row = table.insertRow(0);

                alert("checked");

                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);

                cell1.innerHTML = "NEW CELL1";
                cell2.innerHTML = "NEW CELL2";

            } else {
                alert("notchecked");
            }
        }
    </script>
</body>

</html>