如何在javascript中将单击事件添加到按钮？函数createbtn（） { var n=document.getElementById（“number”）.value；对于（i=1；ip；i--） { document.getElementById（“x”+i）.value=i-p； } 对于（i=1；i_Javascript_Html

如何在javascript中将单击事件添加到按钮？函数createbtn（） { var n=document.getElementById（“number”）.value；对于（i=1；ip；i--） { document.getElementById（“x”+i）.value=i-p； } 对于（i=1；i

javascript html

如何在javascript中将单击事件添加到按钮？函数createbtn（） { var n=document.getElementById（“number”）.value；对于（i=1；ip；i--） { document.getElementById（“x”+i）.value=i-p； } 对于（i=1；i,javascript,html,Javascript,Html,这里有几个问题 1）使用有意义的变量名。x和p几乎不具有指示性，当您有一天回到代码并想知道它们的作用时，这会让生活变得困难。（它们也会阻碍人们在堆栈溢出问题上向您提供帮助，他们必须首先解释它们。） 2）您不需要执行document.getElementById（“x”+i）.onclick-您已经有了对x中按钮的引用，因此您只需执行x.onclick 3）通常，不要使用DOM-0事件（例如，.onclick）。这些事件只允许每种类型中的一种，并且不易管理。相反，请使用.addEventLi

这里有几个问题

1）使用有意义的变量名。

和

几乎不具有指示性，当您有一天回到代码并想知道它们的作用时，这会让生活变得困难。（它们也会阻碍人们在堆栈溢出问题上向您提供帮助，他们必须首先解释它们。）

2）您不需要执行

document.getElementById（“x”+i）.onclick

-您已经有了对

中按钮的引用，因此您只需执行

x.onclick

3）通常，不要使用DOM-0事件（例如，

.onclick

）。这些事件只允许每种类型中的一种，并且不易管理。相反，请使用

.addEventListener（）

4）根据@Alex Kudryashev的评论，您正在犯一个初学者常见的错误，即试图在异步闭包中引用迭代变量运行时，

将始终计算为

的最后一个值，因为它发生在循环完成后。相反，您需要在绑定事件处理程序时传入

的运行时副本。这可以在立即执行的函数的帮助下完成，该函数返回事件处理程序。（如果您是JS新手，这可能会有点让人望而生畏，因此超出了本答案的范围。不过，请查阅。）

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

总之，请尝试以下方法：

<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>