sag*_*gar 1 html javascript html5
<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,因为它在循环结束后发生.相反,您需要i在绑定事件处理程序时传递in 的运行时副本.这可以在立即执行的函数的帮助下完成,该函数返回事件处理程序.(如果你是JS的新手,这可能有点令人生畏,因此不在这个答案的范围内.不过,请查阅.)
5)不要单独绑定到每个按钮,而是查看事件委托.这使您的代码更有效,并且可以在处理大量元素和事件时提高性能.
总而言之,试试这个:
x.addEventListener('click', (function(i_local_copy) { return function() {
rotate(i_local_copy);
}; })(i));