Question

<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事件的方法无法正常工作。帮我！！

Answer 1

这里有几个问题。

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的运行时副本。这可以在立即执行的函数的帮助下完成，该函数返回事件处理程序。（如果你是JS的新手，这可能有点令人生畏，因此超出了这个答案的范围。不过，请查阅。）

5）不要单独绑定到每个按钮，而是查看事件委托。这使您的代码更有效率，并且可以在您处理大量元素和事件时提高性能。

总而言之，试试这个：

x.addEventListener('click', (function(i_local_copy) { return function() {
    rotate(i_local_copy);
}; })(i));

如何在javascript中添加点击事件到按钮？

1 个答案: