javascript - 我不明白为什么在单击链接后显示 "undefined"而不是传递的参数

Question

我不明白为什么点击链接后会显示“undefined”。有谁知道为什么吗？

let allBlocks = ["one","two"];

for (i = 0; i < allBlocks.length; i++) {
  document.body.innerHTML += '<p id="" onclick="test(allBlocks[i])">Link</p>';
}

function test(n){
    alert(n);
}

Answer 1

因为您在点击处理程序中的代码是

test(allBlocks[i])

您的代码似乎在全局范围内，这是它没有抛出错误的唯一原因。单击发生时，i 的值为 allBlocks.length，超出了数组的末尾。访问不存在的数组条目会导致 undefined。

最小的变化是使用字符串连接将 i 的值而不是 i 放在点击处理程序中:

document.body.innerHTML += '<p id="" onclick="test(allBlocks[' + i + '])">Link</p>';

但是，与其这样做，我建议通过 addEventListener 进行现代事件处理:

for (let i = 0; i < allBlocks.length; i++) {
//   ^^^---- Note
  const p = document.createElement("p");
  p.textContent = "Link";
  p.addEventListener("click", test.bind(null, allBlocks[i]));
  document.body.appendChild(p);
}

---

旁注:element.innerHTML += ... 从来都不是一个好主意。它强制浏览器循环遍历 element 的全部内容，为它包含的 DOM 结构构建一个 HTML 字符串，然后将该字符串传递给 JavaScript 层；然后 JavaScript 层必须添加到字符串并将其传递回浏览器；然后浏览器必须解析 HTML，创建一堆新的替换元素，清除 element 的内容，并用这些新元素替换它。除了大量不必要的工作之外，它还会破坏元素上的所有事件处理程序、任何状态信息等。