<html>
<body>
<input type="text" id="number"/>
<input type="button" value="create button" onclick="createbtn()"/>
<br>
<script>
function createbtn()
{
var n=document.getElementById("number").value;
for(i=1;i<=n;i++)
{
var x = document.createElement("INPUT");
x.setAttribute("type", "button");
x.setAttribute("value", i);
x.setAttribute("id","x"+i);
document.body.appendChild(x);
document.getElementById("x"+i).onclick=function(){rotate(i)};
}
}
function rotate(p)
{
var n=document.getElementById("number").value;
var j=n;
var k=0;
for(i=n;i>p;i--)
{
document.getElementById("x"+i).value=i-p;
}
for(i=1;i<=p;i++)
{
document.getElementById("x"+i).value=(j-(p-1))+k;
k++;
}
}
</script>
</body>
</html>
在上面的代码中，我想做的是创建与文本字段中输入的数量相等的按钮数量，然后向这些按钮添加单击事件，以便在单击它们时每个按钮的值都会旋转。我用于获取 onclick 事件的方法无法正常工作。帮我!!
最佳答案
这里有几个问题。
1) 使用有意义的变量名称。 x 和 p 几乎没有指示性，当您有一天回到代码并想知道它们的作用时，会让生活变得困难。 (它们也会阻碍人们在 Stack Overflow 上试图帮助你，因为他们必须首先解释它们。)
2) 您不需要执行 document.getElementById("x"+i).onclick - 您已经在 x 中引用了该按钮，因此你只需执行x.onclick即可。
3) 通常，不要使用 DOM-0 事件(例如 .onclick)。这些只允许您每种类型中的一种，并且不太易于管理。相反，请使用 .addEventListener()。
4) 根据 @Alex Kudryashev 的评论，您犯了一个常见的初学者错误:尝试在异步闭包中引用迭代变量。换句话说，当 rotate() 运行时，p 将始终计算出 i 的最后一个值，因为它发生在循环之后已完成。相反，您需要在绑定(bind)事件处理程序时传递 i 的运行时副本。这可以借助返回事件处理程序的立即执行函数来完成。 (如果您是 JS 新手，这可能有点令人畏惧，因此超出了本答案的范围。不过，请查一下。)
5) 与其单独绑定(bind)到每个按钮，不如研究事件委托(delegate)。这使您的代码更加高效，并且在处理大量元素和事件时可以提高性能。
总而言之，试试这个:
x.addEventListener('click', (function(i_local_copy) { return function() {
rotate(i_local_copy);
}; })(i));
关于javascript - 如何在javascript中向按钮添加点击事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38487761/