javascript - 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.

question from:https://stackoverflow.com/questions/5067887/function-is-not-defined-uncaught-referenceerror

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!
});