爲什麼我立即調用函數表達式會干擾我的onclick？

(function() { 
    var tasks = /* Some awesome content stored here */ 
    var render = ''; 
    for(var x = 0; x < questions.length; x+= 1) { 
    render += '<p onclick="changeText(' + x +')">question[i]</p>' 
} 
    function changeText(x) { 
     // some fancy stuff happens here with a certain x 
    } 
})();

爲什麼我在嘗試使用IIFE時下面的錯誤，但如果我擺脫IIFE這個工作得很好？是不是我的changeText（）與其他一切都在同一範圍內？爲什麼我立即調用函數表達式會干擾我的onclick？

我該如何解決這個問題？

Uncaught ReferenceError: changeText is not defined 
    at HTMLElement.onclick

來源

2017-09-26 user19380947

應該更好地工作從父屬性調用它。給你的HTML'p'。 –

的函數聲明創建一個變量（與是函數的值）在當前範圍。

onclick屬性只能訪問自己的範圍和全局範圍。

的IIFE內部功能是超出範圍。

的快速和骯髒的解決方案是讓changeText一個全球性的。

的清潔解決方案，OTOH：

這是一個原因，你應該避免使用的onclick屬性。

不要砸串在一起生成HTML。直接生成DOM並使用addEventListener。

for(var x = 0; x < questions.length; x+= 1) { 
    var p = document.createElement("p"); 
    p.appendChild(document.createTextNode("question[i]"); 
    p.setAttribute("data-x", x); 
    p.addEventListener("click", function() { changeText(this.dataset.x); }); 
    something.appendChild(p); 
}

注：段落沒有被設計成交互式控件。向他們添加點擊事件使得他們無法訪問不（或不能）使用指點設備的人。您應該使用旨在點擊的東西（如<button>）。

來源

2017-09-26 09:11:44 Quentin

_「乾淨的解決方案」_：我不同意。您不應該在循環中創建該點擊處理程序。 – Cerbrus

@Cerbrus你能解釋一下爲什麼在循環中改變點擊處理程序是錯誤的？這是一個美學問題，還是它影響你的代碼？無論如何，購買做這樣的事情？ – user19380947

@ user19380947：如果您有50個問題，則創建該函數的50個重複項。只需在循環外部創建函數_once_，並將其傳遞給'addEventListener'。 – Cerbrus

爲什麼我立即調用函數表達式會干擾我的onclick？

回答

相關問題