为什么我立即调用的函数表达式会干扰我的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>）。