调用自调用函数中定义的函数

call a function defined inside self-invoking function

本文关键字：调用 函数 定义      更新时间：2023-11-04

我有一个自调用函数来保存我所有的javascript代码。（如书中所建议）

在这个函数中，我创建了一个按钮，这个按钮有onclick="myfunction（）"属性集。像这样：

(function() {
    var x = 4;
    var btn = document.createElement('button');
    btn.type = "button";
    btn.style.width = "100";
    btn.textContent = "click me";
    btn.id = "bid";
    btn.setAttribute('onclick', "myfunction()");
    document.body.appendChild(btn);
    function myfunction() {
       alert(x);
    } 
})();

但是当我点击created按钮时，myfunction（）就找不到了。消息是：

ReferenceError:找不到变量：myfunction

然后我把我的函数（）像这样移出：

(function() {
    var x = 4;
    var btn = document.createElement('button');
    btn.type = "button";
    btn.style.width = "100";
    btn.textContent = "click me";
    btn.id = "bid";
    btn.setAttribute('onclick', "myfunction()");
    document.body.appendChild(btn);
})();
function myfunction() {
    alert(x);
}

现在它可以找到myfunction（），但提醒的x值类似于[object HTMLSelectElement]，不是我所期望的。

我对自调用函数中的函数有点困惑。

不要将函数作为字符串传递，因为它是在找不到函数的上下文中求值的，只需执行

btn.addEventListener('click', myfunction);

如果我理解你的问题，如果你想使用另一个onload函数或某个foo作为onload函数。

     function foo(){ 
        some code here for foo function
        bar();
     }

     function bar() {
        some code here for bar function
     }

导出您的函数，以便您可以从HTML中调用它。

(function() {
    var x = 4;
    var btn = document.createElement('button');
    btn.type = "button";
    btn.style.width = "100";
    btn.textContent = "click me";
    btn.id = "bid";
    btn.addEventListener('click', myfunction);
    document.body.appendChild(btn);
    function myfunction() {
       alert(x);
    } 
    window.myfunction = myfunction;
})();
相关文章：