Javascript Uncaught TypeError: Cannot set property 'onclick' of null

Question

This is the error from my console from the script below,

Uncaught TypeError: Cannot set property 'onclick' of null

<script>
                document.getElementById("finish_$pend[contractID]").onclick=function() {
                        if (document.getElementById("finish_$pend[name]_$i").style.display==="none") {
                        document.getElementById("finish_$pend[name]_$i").style.display="block";}
                        else {
                        document.getElementById("finish_$pend[name]_$i").style.display="none"}}
            </script>


Heres the HTML Markup, for the script posted above

<div class="panel-body text-center">
            <table class='table table-responsive'>
            <?php 
            $user=$this->session->user_id;
            $pending = $database->select("tbl_contract", "name, amount, contractID","userID = ".$user." AND paid = 1 AND confirmed = 0", "date ");
            $i=1;
            if (is_array($pending)) {
            foreach($pending as $pend) { print <<<HERE
            <tr>
            <td>
            <div style="border-bottom: 1px solid gainsboro; padding-bottom: 10px; text-align: left; color: grey">
            <span>$i.  $pend[name] - $$pend[amount]</span>
            <!--<button id="finish_$pend[contractID]" style="position: absolute; right: 50px;  background: orange; color: white; border-radius: 3px; margin-top: 3px; border: 1px solid orange">Checkout</button> -->
            </td>

            </tr>
                    </div>

the element "finish_$pend[contractID]" isn't being returned, so calling onclick on null is causing the error. — Ryan Wilson, Feb 28 '18 at 15:48
Can you post the relevant HTML markup please? It would help if we could see the IDs of the elements on your page. The error you're getting is because it cannot find an element with the Id "finish_$spend[contractID]"; could be because of the use of $ and/or square brackets. If you change the Id to something simple to test with do you still get the error? This explains valid characters for HTML Ids: https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Loki, Feb 28 '18 at 15:48
I agree, post the relevant HTML code, otherwise @RyanWilson gave you your error. — , Feb 28 '18 at 15:49
@NdiokweluZubby You have your button with the id commented out in your HTML. Remove the from the right side of your button, otherwise it is not going to render and you will keep getting an error for trying to add onclick event to your button. — Ryan Wilson, Feb 28 '18 at 16:10
Based on my understanding of your question, I have posted a solution for you that will hide and show the amounts — DataCure, Feb 28 '18 at 16:34

DataCure · Answer 1 · 2018-02-28T16:31:19.937

Summary of your question My understanding from what you have posted, it would be that your getting an error for attempting to set an event to be that of a function, this is not possible.

EDIT:
Having reviewed the HTML Markup you have since posted, I can see what you are trying to do, it appears your trying to toggle back and forth the display of an element based on an onclick event between display and none

Solution

add an onclick attribute to the HTML DOM element such as onclick="funNameInJS()"
add an event listener for a click, and then test the element ID name to see if they clicked the object you was expecting (preferably use the 1st method)

You cannot set an event listener (onclick) to be a function however. Which is what you appear to be doing.

Edited post Since you have posted your HTML markup, this is what I would propose

function funToggleDisplay(elName){
  var el = document.getElementById(elName);
  if(el.style.display=="block" || el.style.display==""){
    el.style.display="none";
  }else{
    el.style.display="block"
  }
}

.divToControlToggle{
  border-bottom: 1px solid gainsboro; 
  padding-bottom: 10px; 
  text-align: left; 
  color: grey; 
  width: 100%; 
  background: lime
}
.table-responsive{
  width: 100%;
}

<div class="panel-body text-center">
  <table class='table table-responsive'>
    <tr>
      <td onclick="funToggleDisplay('amounts')">Click me to hide and show the amounts</td>
    </tr>
    <tr>
      <td id="amounts">
        <div onclick="funToggleDisplay('amounts')" class="divToControlToggle">
          <span>$50.00</span>
        </div>
      </td>
    </tr>
  </table>
</div>

Note: Your HTML is invalid, you are not closing DIVs / Table Elements in the correct order

Heres the HTML Markup – Ndiokwelu Zubby Feb 28 '18 at 16:00 — Ndiokwelu Zubby, Feb 28 '18 at 16:00
Amended my answer accordingly – DataCure Feb 28 '18 at 16:22 — DataCure, Feb 28 '18 at 16:22

Javascript Uncaught TypeError: Cannot set property 'onclick' of null

1 Answers1