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

---

nb：段落并非设计为交互式控件。将点击事件添加到它们，使他们无法使用指向设备（或不能）使用指向设备。您应该使用旨在单击的东西（例如<button>）。