javascript function does not execute in html

Question

This has to be a simple question but I can't find the answer. I am trying to call my javascript function "Update_PointTracker_Account" within a modal so it executes when the modal is opened. For some reason it won't execute. However, the Onclick button calls the function perfectly. What am I doing wrong?

 <div class="modal hide fade" id="Refresh_PointTracker_Program" data-keyboard="false" data-backdrop="static" aria-hidden="true">
 <div class="modal-header" align='center'>
 <h3>Refreshing PointTracker Program</h3>
 </div>
 <div class="modal-body" style="text-align: center">
 <p> The points program is being refreshed</p>
 </div>
 <div style="text-align: center" id='updated_program_list'></div>
 <script>
 Update_PointTracker_Account();
 </script>
 <div class="modal-footer">
 <button onclick ="Update_PointTracker_Account()" class="btn" aria-hidden="true">Update</button>
 <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
 </div>
 </div>

• MikeSmithDev: Where is that function at? Sounds like you are trying to execute it before it exists.
• fat fantasma: The function 'Update_PointTracker_Account()' is located in my 'pointtracker.js" file. That file is included at the top of my html. So, isn't the function already defined? My onclick='Update_PointTracker_Account" works fine in the bottom of the modal. Why? thx

Answer 1

That is because you have not defined the function Update_PointTracker_Account() at all.

It has to appear somewhere in the page, either as an inline JS or an imported JS file, and should look like:

function Update_PointTracker_Account() {
 // Do something
}

• fat fantasma: I did import my pointtracker.js file (which contains my function) at the beginning of my html. The Onclick works fine though for calling the function.
• MikeSmithDev: @Terry how do you reckon it doesn't exist at all, considering it runs on button click?

Answer 2

I'm assuming this modal is being loaded with .innerHTML somewhere.

<script> tags do not run when inserted with innerHTML. Instead, you should call the function when you assign the innerHTML. The reason the button click works is because it's handled differently.

Answer 3

Try to use a callback when you call your modal or verify if Update_PointTracker_Account() is declared before the call.

Answer 4

first: unless You are in a html5 doc You should add type attribute to script tag, second: the function exists? hope it helps

• fat fantasma: The function is defined in my pointtracker.js files that is included before (at top) of the html.
• fedeghe: ok... and the modal is loaded via ajax or is simply hidden and shown at right time?
• fat fantasma: The modal is hidden and shown with an on click. I also tried to put the actual function in the modal to rule out an undefined reference issue. I get the same problem. The script does not run.