JavaScript用setAttribute绑定onclick无法传循环变量n怎么解决？

你的代码存在两个核心问题：

• setAttribute 仅支持「属性名、属性值」两个入参，你传入的第三个参数n不会被处理，同时JS原生字符串不支持%d格式化占位符，最终生成的onclick属性值不符合预期
• 通过字符串拼接的方式绑定事件属于老旧实现，可维护性差，更推荐使用标准的addEventListener方法绑定事件

推荐实现（最优方案） #

不需要额外传递id参数，事件回调中可以直接获取当前触发事件的DOM元素，代码如下：

<body>
  <p id="1">Paragraph 1</p>
  <p id="2">Paragraph 2</p>
  <p id="3">Paragraph 3</p>
</body>

<script>
function myFunction(targetEl) {
    targetEl.style.color = "green";
}
function initAll() {
    const elements = document.getElementsByTagName('p');
    // 使用let声明循环变量，每次迭代生成独立作用域
    for (let n = 0; n < elements.length; n++) {
        elements[n].addEventListener('click', function() {
            // this指向当前触发点击事件的p标签
            myFunction(this);
        });
    }
}
initAll();
</script>

可选方案：需要传递id参数的场景 #

如果你的业务逻辑必须要传递id参数，可以按如下写法调整：

function initAll() {
    const elements = document.getElementsByTagName('p');
    for (let n = 0; n < elements.length; n++) {
        // 提前拿到当前p标签的id
        const currentId = elements[n].id;
        elements[n].addEventListener('click', function() {
            myFunction(currentId);
        });
    }
}

原始写法的修正（不推荐） #

如果你坚持要使用setAttribute设置onclick属性，可以通过字符串拼接实现参数传入，仅作参考：

for (let n = 0; n < elements.length; n++) {
    const currentId = elements[n].id;
    // 用模板字符串拼接生成合法的回调调用语句
    elements[n].setAttribute("onclick", `myFunction(${currentId})`);
}

内容的提问来源于stack exchange，提问作者RichieSambora