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

I’ve been using the following resources:

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

<!doctype html>
<h1>Checkbox Test</h1>
        <table class="tb" id="checky">
                <th>Checkbox 1</th>
                <th>Checkbox 2</th>
                  <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>
            function doalert(checkboxElem) {
              if (checkboxElem.checked) {
            var table=document.getElementByID("checky");
            var row=table.insertRow(0);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);

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

              } else {

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

>Solution :

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.

Leave a Reply