javascript – Function is not defined – Uncaught ReferenceError

javascript – Function is not defined – Uncaught ReferenceError

The problem is that codeAddress() doesnt 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!
});

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.

javascript – Function is not defined – Uncaught ReferenceError

Your issue here is that youre not understanding the scope that youre setting.

You are passing the ready function a function itself. Within this function, youre creating another function called codeAddress. This one exists within the scope that created it and not within the window object (where everything and its uncle could call it).

For example:

var myfunction = function(){
    var myVar = 12345;
};

console.log(myVar); // undefined - since it is within 
                    // the scope of the function only.

Have a look here for a bit more on anonymous functions: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

Another thing is that I notice youre using jQuery on that page. This makes setting click handlers much easier and you dont need to go into the hassle of setting the onclick attribute in the HTML. You also dont need to make the codeAddress method available to all:

$(function(){
    $(#imgid).click(function(){
        var address = $(#formatedAddress).value;
        geocoder.geocode( { address: address}, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
             map.setCenter(results[0].geometry.location);
           }
        });
    });  
});

(You should remove the existing onclick and add an ID to the image element that you want to handle)

Note that Ive replaced $(document).ready() with its shortcut of just $() (http://api.jquery.com/ready/). Then the click method is used to assign a click handler to the element. Ive also replaced your document.getElementById with the jQuery object.