函数未定义 - 未捕获的referenceerror

Question

我有这个未被捕获的referenceerror函数未定义错误哪些不明白.

如果我有

$(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);
   }
  });
 }
});

和

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

当我按下按钮时,它将返回"未捕获的参考错误".

但是如果我把codeAddress()放在 $(document).ready(function(){}之外,那么它运行正常.

我的意图是将codeAddress()放在document.ready.function中.

Answer 1

问题是codeAddress()没有足够的范围可以从按钮调用.您必须在回调之外将其声明为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

如何删除onclick属性并添加ID:

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

你的脚本:

$(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);
});

这种方式如果你需要更改功能名称或任何不需要触摸html.

Answer 3

您的问题是您不了解您所设置的范围.

您正在将ready函数传递给函数本身.在此函数中,您将创建另一个名为的函数codeAddress.这个存在于创建它的范围内,而不是在window对象中(所有东西和它的叔叔都可以调用它).

例如:

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

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

看看这里有关匿名函数的更多信息:http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

另一件事是我注意到你在该页面上使用jQuery.这使得设置点击处理程序变得更加容易,您无需在HTML中设置"onclick"属性.您也不需要codeAddress为所有人提供该方法:

$(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);
           }
        });
    });  
});

(您应该删除现有的onclick并向要处理的图像元素添加ID)

请注意,我已将$(document).ready()其替换为just $()(http://api.jquery.com/ready/)的快捷方式.然后使用click方法为元素分配单击处理程序.我也用document.getElementByIdjQuery对象替换了你.

Answer 4

你必须在ready()之外编写该函数体;

因为ready用于调用函数或绑定具有绑定id的函数,如下所示.

$(document).ready(function() {
    $("Some id/class name").click(function(){
        alert("i'm in");
    });
});

但如果你在onchange/onclick事件上调用"showAmount"函数,则无法执行此操作

$(document).ready(function() {
    function showAmount(value){
        alert(value);
    }

});

你必须在ready()之外写"showAmount";

function showAmount(value){
    alert(value);//will be called on event it is bind with
}
$(document).ready(function() {
    alert("will display on page load")
});