Not completely sure why i am receiving Cannot read property ‘innerHTML’ of null error message

Solution for Not completely sure why i am receiving Cannot read property ‘innerHTML’ of null error message
is Given Below:

I am trying to add a table row to the html code using JS but i am receiving an error message stating ” Uncaught TypeError: Cannot read property ‘innerHTML’ of null “

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="sampleTable" border="1">
        <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
        </tr>
        <tr>
            <td>Row2 cell1</td>
            <td>Row2 cell2</td>
        </tr>
    </table><br>
    <input type="button" onclick="insert_Row()" value="Insert row">
</body>
<script src="index.js"></script>
</html>

let table = document.getElementById(sampleTable);

function insert_Row() {
  let template = `<tr><td>Row3 cell1</td>
<td>Row3 cell2</td></tr>`;
  table.innerHTML += template;
}

You used the wrong syntax. The id, or anything related to string, must be put inside double quotes

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

let table = document.getElementById("sampleTable");

function insert_Row() {
  let template = `<tr><td>Row3 cell1</td>
<td>Row3 cell2</td></tr>`;
  table.innerHTML += template;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="sampleTable" border="1">
        <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
        </tr>
        <tr>
            <td>Row2 cell1</td>
            <td>Row2 cell2</td>
        </tr>
    </table><br>
    <input type="button" onclick="insert_Row()" value="Insert row">
</body>
<script src="https://codeutlity.org/questions/68615488/index.js"></script>
</html>

You need to add quotes to the id

let table = document.getElementById("sampleTable");
function insert_Row() {
  let template = `<tr><td>Row3 cell1</td>
    <td>Row3 cell2</td></tr>`;
  table.innerHTML += template;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="sampleTable" border="1">
        <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
        </tr>
        <tr>
            <td>Row2 cell1</td>
            <td>Row2 cell2</td>
        </tr>
    </table><br>
    <input type="button" onclick="insert_Row()" value="Insert row">
</body>

</html>

You have to give a string as a parameter to getElementById method

let table = document.getElementById("sampleTable");

also seems like you want to append a table row into your table, the innerHTML property won’t help as it gives the inner html text of your specified element for example a paragraph. To append an element into your table you have to first create a table row element by .createElement and then use the .append or .appendChild method to append the child into its parent

let table = document.getElementById("sampleTable");

function insert_Row() {
    let template = document.createElement('TR');
    // then use the innerHTML property to insert data into your table row
    table.append(template);
}

or you can use the .insertRow method to insert the row directly

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow

https://developer.mozilla.org/en-US/docs/Web/API/Element/append