вызывать функцию, определенную внутри функции самозапускания

Question

У меня есть функция self-invoking для хранения всего моего кода 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); 
    } 

})(); 

Но тогда, когда я нажимаю на созданную кнопку, myfunction() не может быть найден. данное сообщение:

ReferenceError: Не удается найти переменную: MyFunction

Затем я переехал 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(), но насторожило х значение - это что-то вроде [object HTMLSelectElement], а не то, что я ожидал.

Я как бы запутался в функциях внутри самозапускающихся функций.

Answer 1

Не передать функции в виде строки, потому что это eval'ed в условиях, когда функция не может быть найдена, просто сделать

btn.addEventListener('click', myfunction); 

Answer 2

, если я понимаю, что ваши прошу, если вы хотите использовать другую функцию thats onload или что-то foo, являющееся функцией onload.

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


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

Answer 3

Экспортируйте свою функцию, чтобы ее можно было вызывать из 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; 
})();