onclick event does not run jQuery function

Question

I have an html file which is correctly linked to a js file (and also the jquery library file).

<input type="button" onclick="practice();" id="intro_next_button" value="Practice"/>

Inside the js file:

$(window).load(function(){
    function practice(){
        alert("WORKS");
    }
});

This runs if function practice is outside of the $(window).load(function(), but not when it is inside of it. There are many similar questions to this, but I have not found one that is specifically about an onclick event only not working inside of a jquery $(window).load(function().

because the function is in the block scope of onload and is not global. Why is it defined in the onload? Move it out. — epascarello
– epascarello, Commented Oct 12, 2016 at 0:08
Oh, I was under the impression that I should put everything in the onload function in order to make sure it works. — Blake Allen
– Blake Allen, Commented Oct 12, 2016 at 0:11
This question is similar to: What is the scope of variables in JavaScript?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Oct 10, 2024 at 14:07

nicmoon · Accepted Answer · 2016-10-12 00:12:05Z

2

This doesn't work because anything defined (i.e. via keywords function or var) inside a function block applies that block as it's scope. So if you make a variable, x, inside the block you won't have the value outside there.

var x = 2;
function test() { var x = 5; }
console.log(x);

Prints 2.

These are also competing styles. Typically if you use window.onload or the "improved" jQuery $(document).ready you bind events in the body of the function.

$("#intro_next_button").click(function() { alert("WORKS"); });

answered Oct 12, 2016 at 0:12

nicmoon

1361 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Juan Carlos · Accepted Answer · 2016-10-12 00:13:33Z

2

What you are doing is defining a function inside the function that is passed to load() as a parameter.

onclick is looking for practice() in the window scope.

Why you want to DEFINE the function when page is loaded? to wait until is loaded so the user can click it? If so, try this:

$(window).load(function(){
  window.practice = function(){
    alert("WORKS");
  }
});

answered Oct 12, 2016 at 0:13

Juan Carlos

6067 silver badges21 bronze badges

2 Comments

Blake Allen Over a year ago

How would I call the window.practice function in the onclick? I tried onclick="practice()" and onclick="window.practice()"

Juan Carlos Over a year ago

when you define something in window, its basically global scope. No need to call window.functionname() Basically EVERYTHING you define without scope is defined in window. :) Try in this code: function test(){}; console.log('what?', window.test);

Evgeny Gorb · Accepted Answer · 2016-10-12 00:20:37Z

1

In this case your function is visible only within the anonimous function you defined in load. You should attach an onclick event to the button using the jquery click inside the load (and also remove onclick attribute):

  $('#buttonid').click(function(){practice();});

answered Oct 12, 2016 at 0:20

Evgeny Gorb

1,5412 gold badges13 silver badges26 bronze badges

1 Comment

Juan Carlos Over a year ago

If not mine, a hybrid from ours could be ok also: $(document).load(function(){ $('#buttonid').click(function(){practice();}); });

Collectives™ on Stack Overflow

onclick event does not run jQuery function

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related