Question

I have a small google map script to get location, either from Lat Lon pair, or address , and also to UPDATE those lat, lon and address input fields ..

See jsfiddle here

When clicking the “draw” button – a function called codeAddress() is supposed to be called .
but on the firebug console i get :

Error: ReferenceError: codeAddress is not defined

I do not understand why the codeAddress() is not defined …

The strange thing is , that if I move the function OUTSIDE of the

jQuery(document).ready(function(){} it DOES work (See jsFIDDLE)

(I also need to move the var marker – otherwise it will only center the map,and gives marker is undefined error;

So my question is very simple, What am i doing wrong ?
Why the same function works outside the jQuery(document).ready(function(){} but not inside ?

And a sidekick question : How do I get to update the address input field when the marker is dragged (like with the lon lat inputs..) ???

UPDATE – thanks to all – learned another important thing . Unfortunately – all are valid answeres and solutions – but I can accept only one, and for me , the easiest solution to understand (being so unfamiliar with JS – and despite it being maybe a not perfect practice ) is @cowls thanks again to everyone..

Answer 1

Rather than use onclick, you should assign a click handler to the required elements INSIDE your document.ready method.

E.g.

$(input).click(function() { codeAddress() });

Would assign the code address function to the click event for all input boxes, obviously you want to target this at specific classes or ids

this is best practice rather than using onclick.