calling javascript function from html doesn't work

Question

here is the problem.. i have a javascript file which is named javascript.js like this

$(document).ready(function(){

 function init()
  { 

    //code goes here

  }
  }

now the index.html file has a command button which should call the init() function.

   <html>
   <head><script src=javascript.js ....></script>
   <body><button type="button" onclick="init()">Call Init!</button></body>
   </html>

But it doesn't call it. Nothing happens as expected. Please suggest a solution.

This is clearly not the code, and it has several syntax errors. No way someone can help you unless you show the real code or at least are paying attention to details when explaining it. — 6502
– 6502, Commented Aug 5, 2012 at 5:34
@6502 Ease off. Sure, the poster made some syntax errors, but gave more than enough to answer their question. I don't know about you but I don't copy and paste 100+ lines when I ask a question and think I would be annoyed if someone else did. — dgeare
– dgeare, Commented Aug 5, 2012 at 5:40
@dgeare: Sorry if this for some reason sounds harsh, but this question is quite low quality. The title itself is already bad (more or less like "preincrement doesn't work in C++")... bad syntax in the javascript part, bad tagging (now fixed, but javascript is one thing, jquery is another), bad html (where is </head>?, what is ....?), no homework (any error messages in the javascript console?). Actually after seeing so much sloppiness I didn't even pay attention to the content. I bet the same happened to many other viewers. — 6502
– 6502, Commented Aug 5, 2012 at 6:42
@6502 Thanks for all the advice! Will try to follow it in the future — Pasan W.
– Pasan W., Commented Aug 5, 2012 at 13:02

Brad · Accepted Answer · 2012-08-05 05:33:43Z

9

You should define your function outside $(document).ready() scope.

edited Aug 5, 2012 at 5:33

Brad

164k57 gold badges380 silver badges559 bronze badges

answered Aug 5, 2012 at 5:32

Māris Kiseļovs

17.3k5 gold badges43 silver badges50 bronze badges

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

8 Comments

Jared Over a year ago

While they SHOULD do this will it keep the function call from functioning? EDIT: Is the answer related to scope? (since a function in javascript is just an object?)

Pasan W. Over a year ago

Isn't there any way i can access it when its INSIDE $(document).ready() scope??

Jared Over a year ago

@PasanWijesinghe while I'm not 100% on the if possible. Why would you want to? A function won't be called simply by defining it so there is NOTHING to be gained by doing this...

Pasan W. Over a year ago

@Jared This is a javascript snake game. The problem I had is: All the functions are setup inside the $(document).ready() scope. The init() is called to restart the game. I need to call it from index.html. I temporarily solved the problem by RELOADing the page whenever i need to restart the game manually

Jared Over a year ago

@PasanWijesinghe Do you have access to the js source? If so move the methods OUTSIDE of the $(document).ready() You won't lose any functionality and will gain yourself the ability to use the method like you are eluding to in your question. The exception to this is if you have multiple objects that need to have the same method names in which case you would want the methods inside of the object for scope reasons.

|

Bergi · Accepted Answer · 2012-08-05 05:52:13Z

3

The onclick attribute will be executed in a global context. Your init function is scoped to the anonymous function which you pass to jQuery. Three solutions:

Move the init function outside of the ready function, into the global scope
export the init function by making it a property of the global object: window.init = function() {…};
as you use jQuery, you should not need to define any handlers in attributes. Instead use (inside the ready function): $("button").click(function init() {…}); Even better use an id to reference the button.

edited Aug 5, 2012 at 5:52

answered Aug 5, 2012 at 5:46

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

Apple · Accepted Answer · 2012-08-05 05:42:40Z

2

Try viewing the page in chrome. Hit F12 to view the console. You'll be able to quickly debug the issue. At first glance, however, I do see that your $(document).ready function is not closed properly. Add ');' at the end of the code you included. Also, add quotes around javascript.js in your script tag. See if that helps.

answered Aug 5, 2012 at 5:42

Apple

211 bronze badge

1 Comment

Pasan W. Over a year ago

Sorry for the syntax errors. But they were not the problem. I just typed the 'format' of the code.

Ahmed Hamdy · Accepted Answer · 2013-01-22 14:34:20Z

1

Why don't you use

function init()
{ 
   $(document).ready(function() {
       //code goes here
   });
}

You can use flag too in order to keep track if the "//code goes here" proceeded or not. So in case of document not ready yet, you can use while loop with setTimeOut function for some pause interval "In order to not hang the client browser".

answered Jan 22, 2013 at 14:34

Ahmed Hamdy

2,9771 gold badge19 silver badges23 bronze badges

Collectives™ on Stack Overflow

calling javascript function from html doesn't work

4 Answers 4

8 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related