javascriptのボタンにクリックイベントを追加するには？

<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イベントを取得するために使用したメソッドが正しく動作していません。助けて！！javascriptのボタンにクリックイベントを追加するには？

出典

2016-07-20 sagar

：

すべてのすべてで、これを試してみてください。コードに関するhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Closuresを読んでください。 –

ここにいくつかの問題があります。

1）意味のある変数名を使用してください。 xとpはほとんど意味がなく、ある日コードに戻って彼らが何をしているのか不思議に思うと、人生が困難になるでしょう。（スタックオーバーフローについての助言をしようとする人々には、最初に解釈しなければならない人もいません）

2）document.getElementById("x"+i).onclickを入力する必要はありません。すでにボタンの参照がxになっています。 do x.onclick。

3）原則として、DOM-0イベントは使用しないでください（例：.onclick）。これにより、各タイプのうちの1つだけが許可され、管理しにくくなります。代わりに、.addEventListener()を使用してください。

4）@Alex Kudryashevのコメントによれば、非同期クロージャー内で反復変数を参照しようとすると、初心者の間違いが頻発しています。つまり、rotate()が実行されるまでに、pは、ループが終了した後に発生するため、常に最後の値がiになります。代わりに、イベントハンドラをバインドする時点で、iの実行時コピーを渡す必要があります。これは、イベントハンドラを返すすぐに実行される関数の助けを借りて行うことができます。（これは、JSの初心者の方であれば少し難しいかもしれませんが、この答えの範囲外です）。

5）各ボタンごとに別々にバインドするのではなく、委任。これにより、コードがより効率的になり、相当数の要素やイベントを処理しているときにパフォーマンスを向上させることができます。これは、ループ内でクロージャを使用して、古典的な間違いです

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

出典

2016-07-20 18:13:52 Utkanos

ありがとうございます！それはうまくいきました。しかし私は私の要件にある変更をしています。すべてのボタンに同じ機能を追加したい場合は、ボタンをクリックするたびにローカルコピーの値を増やす必要があります。これで私を助けることができますか？ – sagar

私はあなたが何を意味するのか分かりません。これは、元の質問からの出発点なので、別の質問をしてください。 – Utkanos

javascriptのボタンにクリックイベントを追加するには？

答えて

関連する問題