Function is not defined - uncaught referenceerror

Question

I have this "Uncaught ReferenceError: function is not defined" error which do not understand.

If I have

$(document).ready(function() {   function codeAddress() {     var address = document.getElementById("formatedAddress").value;     geocoder.geocode({       'address': address     }, function(results, status) {       if (status == google.maps.GeocoderStatus.OK) {         map.setCenter(results[0].geometry.location);       }     });   } }); 

and

<input type="image" src="btn.png" alt="" onclick="codeAddress()" /> <input type="text" name="formatedAddress" id="formatedAddress" value="" /> 

When I press the button it will return the "Uncaught ReferenceError".

But if I put the codeAddress() outside the $(document).ready(function(){}) then it working fine.

My intention is put the codeAddress() within the document.ready function.

Answer 1

The problem is that codeAddress() doesn't have enough scope to be callable from the button. You must declare it outside the callback to ready():

function codeAddress() {     var address = document.getElementById("formatedAddress").value;     geocoder.geocode( { 'address': address}, function(results, status) {         if (status == google.maps.GeocoderStatus.OK) {             map.setCenter(results[0].geometry.location);         }     }); }   $(document).ready(function(){     // Do stuff here, including _calling_ codeAddress(), but not _defining_ it! }); 

Answer 2

How about removing the onclick attribute and adding an ID:

<input type="image" src="btn.png" alt="" id="img-clck" /> 

And your script:

$(document).ready(function(){     function codeAddress() {         var address = document.getElementById("formatedAddress").value;         geocoder.geocode( { 'address': address}, function(results, status) {             if (status == google.maps.GeocoderStatus.OK) {                 map.setCenter(results[0].geometry.location);             }         });     }     $("#img-clck").click(codeAddress); }); 

This way if you need to change the function name or whatever no need to touch the html.