javascript - 单击添加到 DOM 的元素无法获得正确的值

标签 javascript html dom

<分区>

为什么下面的代码在点击时不打印它对应的值?

相反,它打印 5?

var recipeDiv = document.createElement("div");
var recipeUL = document.createElement("ul");
for (var i = 0; i < 5; ++i) {
    var listNode = document.createElement("li");
    listNode.innerHTML = i;
    listNode.onclick = function() { alert(i); }
    recipeUL.appendChild(listNode);
}
recipeDiv.appendChild(recipeUL);
addNodeToDOM(document.body, recipeDiv, 'recipe');

function addNodeToDOM(element, node, id) {
    var div = document.createElement('div');
    div.id = id;
    div.appendChild(node);
    element.appendChild(div);
}

我能够在此处重现错误:jsfiddle

但基本上,我不确定这是否是将元素正确添加到 DOM 的惯例。如果是这样,为什么每次我点击列表元素时,它都不显示

最佳答案

onclick 处理程序执行时,i 的值将始终显示 5 作为 for 循环结束在第 5 次迭代时,

使用this.innerHTML,

listNode.onclick = function() { alert(this.innerHTML); }

Updated Fiddle

关于javascript - 单击添加到 DOM 的元素无法获得正确的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30365742/

相关文章:

javascript - 事件时如何自定义 Bootstrap 选项卡?

javascript - 无法通过 fetch 方法访问 HTMLCollection Item

javascript - 如何简化代码以使用 jQuery 将新元素添加到页面?

php - 用php获取内部html

javascript - (#3) 应用程序必须在白名单 facebook 上

javascript - 通过 DOM 操作插入 html 元素后访问该元素

javascript - 从表单搜索 Tenor API、Json 检索 gif 搜索

javascript - 扩展 jsplumb.draggable 拖动行为

php - 如何查询 html 选择表单?

javascript - 如果启用复选框,如何定向到不同的 url