I recieve Uncaught TypeError: Cannot read property 'innerHTML' of null

Question

I have a PHP file (admin_leader.php) included in another PHP file (admin_panel.php). It should display a table with buttons to change the status of a certain real estate. When I click on them, I get this error Uncaught TypeError: Cannot read property 'innerHTML' of null at SOLD (functions.js:22) at HTMLButtonElement.onclick (admin_panel.php:112)

PHP file / admin_leader.php

$tagname = 0;
echo '<table>';
echo '<tr id="' . $id_generated . '" >';
echo '<th id=idx' . $tagname . ' >' . $idx. '</th>';
echo "<td> <form><button formaction='posty.php?Post_IDy=$id' class='HomeBtn'>$Ftital</button></form></td>";
echo '<td>' . $date. '</td>';
echo '<td>';
if (($STATUS === 'ACTIVE')) {
     echo '<p id="id' . $tagname . '">ACTIVE</p>';
     echo '<button class="btnbtn1" onclick="SOLD(idx' . $tagname . ');">sold</button>';
     echo '<button class="btnbtn2" onclick="RENTED(idx' . $tagname . ');">rented</button>';
     echo '<button  class="btnbtn3" onclick="CANCELLED(idx' . $tagname . ');">cancelled</button>';
     echo '</td>';
     echo '<td>0</td>';
                    
                    }
                    
$tagname = $tagname + 1;
                    
echo '</tr>';
echo '</table>';

I did include it within the body tag <?php include('admin_loader.php')?>

and then at the end, I included the javascript just above the closing tag of </body>.

admin_panel.php

<script src="../scripties/functions.js"></script>
</body>

functions.js

function SOLD(e) {
    alert("zaza");
    var id = document.getElementById(e).innerHTML;
    alert(id);
    $.ajax({
        type: "POST",
        url: "changer.php",
        data: {status: 'SOLD', idz: id}
    })
    alert("baba");
}

here is an image of the issue:

So What is wrong and why would not the javascript read the text context when it is pushed all the way to the end of the body tag?

I had an attempt to manually read it with document.getElementById("idx0").innerHTML; and that was successful: ``

And yet the function still won't read it :/

In `SOLD(id' . $tagname . ')` you’re referencing some variable. Where is that variable defined? Did you mean to pass a string instead? Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Jul 31 '21 at 07:09
Because the arguments are not wrapped in quotes, `e` in `SOLD()` will be the corresponding `` with the same `id` (try logging it). — Andreas, Jul 31 '21 at 07:13

score 1 · Accepted Answer · answered Jul 31 '21 at 07:11

1

The arguments to SOLD, RENTED, and CANCELED need to be in quotes so it's they're string literals.

     echo '<button class="btnbtn1" onclick="SOLD(\'id' . $tagname . '\');">sold</button>';

answered Jul 31 '21 at 07:11

Barmar

741,623
53
500
612

I recieve Uncaught TypeError: Cannot read property 'innerHTML' of null

1 Answers1