在javascript中的window.onload中单击onclick

Question

考虑一下片段：

    <head>      
        <script>
            window.onload = function(){
                function callMe(){
                    alert("Inside the function");
                    this.value = "New Value";                   
                }
                document.getElementById("thisCall").onclick = callMe;
            }
        </script>       
    </head>
    <body>          
        <input type="submit" id="thisCall" />   
    </body>

以上工作正常，按钮文本从提交更改为新值。

但是，如果我稍作修改，为什么下面的代码段不起作用？

        <script>
            window.onload = function(){
                function callMe(){
                    alert("Inside the function");
                    this.value = "New Value";                   
                }
                //document.getElementById("thisCall").onclick = callMe;
            }
        </script>

    </head>
    <body>          
        <input type="submit" id="thisCall" onclick="callMe();"/>        
    </body>

而且我不明白为什么

未捕获的ReferenceError：未定义callMe

是控制台的o / p？

Answer 1

函数声明创建一个指向当前作用域中函数的变量。

在JavaScript中，每个函数都会创建一个新范围。

您正在为分配给onload的匿名函数的范围内创建callMe 。 它不是一个全球性的。

onclick事件处理程序不在上述匿名函数的范围内，因此无法访问该变量。

Answer 2

你的问题是callMe()函数声明在onload作用域内，所以它是本地的，它只在这个作用域内可见。

你必须将它放在外面，这样它才能成为一个全局功能，可以在外面看到，也可以从外面访问：

function callMe(){
     alert("Inside the function");
     this.value = "New Value";                   
}


window.onload = function(){
      callMe();  
      document.getElementById("thisCall").onclick = callMe;
}

编辑：

这段代码：

document.getElementById("thisCall").onclick = callMe;

正在工作，因为它是在onload函数范围内编写的，其中定义了函数callMe 。

如果你将它与onclick属性一起使用它将无法工作，因为就像所说的callMe()在全局范围内无法识别，这就是你callMe is not defined在那里callMe is not defined的原因。

Answer 3

这是由于范围。 您的函数仅存在于分配给window.onload方法的匿名函数的范围内。 该匿名方法知道该方法，因为它在其范围内定义并且可以调用它，但该范围之外的任何内容都不能。

那有意义吗？

在javascript中的window.onload中单击onclick

问题描述

3 个解决方案

解决方案1
4 已采纳 2015-09-02 16:33:37

解决方案2
3 2015-09-02 16:35:33

解决方案3
2 2015-09-02 16:33:36

在javascript中的window.onload中单击onclick

问题描述

3 个解决方案

解决方案1 4 已采纳 2015-09-02 16:33:37

解决方案2 3 2015-09-02 16:35:33

解决方案3 2 2015-09-02 16:33:36

解决方案1
4 已采纳 2015-09-02 16:33:37

解决方案2
3 2015-09-02 16:35:33

解决方案3
2 2015-09-02 16:33:36