Javascript在html中使用参数动态分配onclick事件答案

【问题标题】：Javascript dynamically assign onclick event with parameter in htmlJavascript在html中使用参数动态分配onclick事件
【发布时间】：2017-08-28 16:55:54
【问题描述】：

我正在尝试使用 html onclick 发送 onclick 参数

for (var i = 0; i < 2; i++) {
    if (i == 1) {
        document.write(" <tr class='noBorder' onclick='foo(i)' >");
    }
    if (i == 0) {
        document.write(" <tr class='noBorder' onclick='foo(i)' >");
    }
}

但是，每当我点击一行时，我都会返回 onclick = foo(2)

我一直在环顾四周，发现了同样的问题

Javascript - Dynamically assign onclick event in the loop

我想知道是否可以使用 document.write 做到这一点？

【问题讨论】：

onclick='foo(i)' 将 i 值分别更改为 1 和 0
这个条件没有用。
这些只是测试用例。最终我只会有一行 document.write(..foo(i)

标签： javascript html

【解决方案1】：

您只需从 Javascript 字符串中删除 i：

for (var i = 0; i < 2; i++) {
    if (i == 1) {
        document.write(" <tr class='noBorder' onclick='foo(" + i + ")' >");
    }
    if (i == 0) {
        document.write(" <tr class='noBorder' onclick='foo(" + i + ")' >");
    }
}

2 条笔记

您应该颠倒使用 ' 和 "... 使用 '...' 来分隔属性不是有效的 HTML5（您需要 <div style="..."></div>，而不是 <div style='...'></div>）
foo(2) 随处可见，因为这是 i 拥有的最后一个值。您的 onclick 有效，但正在获取 i 的最后一个值，而不是在呈现 HTML 时硬编码 i 的值。

【讨论】：

如果 i==1 那么你也可以说 onclick='foo(1)'
这是正确的方法，但是出现这种情况的原因是什么？
或者应该删除 if 条件
这些只是测试用例。最终我只会有一行 document.write(..foo(i)
这个答案就是我要找的。谢谢！

【解决方案2】：

document.write 语句必须在页面加载完成之前运行

因此，您不希望将 document.write 放入 onclick

如果您尝试修改已加载的页面，则必须使用 div 标签并使用以下内容：

document.getElementById("name").innerHTML = "bob";

【讨论】：