在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