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

Question

(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（）與其他一切都在同一範圍內？

我該如何解決這個問題？

Uncaught ReferenceError: changeText is not defined 
    at HTMLElement.onclick 

Answer 1

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

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>）。