すべてのボタンに同じ機能を割り当て、いずれかのボタンをクリックしたときに機能パラメータを変更します。

Question

<input type="text" id="number"/> 
<input type="button" value="create button" onclick="createbtn()"/> 
<div class="buttons"></div> 

<script> 
function createbtn() 
{ 
var buttons_container = document.getElementsByClassName("buttons")[0]; 
var n=document.getElementById("number").value; 

buttons_container.innerHTML = ''; 

for(i=1;i<=n;i++) 
{ 
    var x = document.createElement("INPUT"); 
    x.setAttribute("type", "button"); 
    x.setAttribute("value", i); 
    x.setAttribute("id","x"+i); 
    buttons_container.appendChild(x); 
    x.addEventListener('click',(function(i_local_copy){return function() 
    {rotate(i_local_copy);};})(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> 

上記のコードは、テキストフィールドに入力された番号に等しい数のボタンを作成し、各ボタンにイベントが割り当てられているため、ボタンを連続してクリックするとボタンの値が回転します。 （例えば、すべてのボタンが共通のi値を持たなければならない）rotate（i））ボタンのいずれかがクリックされると、rotate関数のiの値は増加しなければならない。

Answer 1

あなたの質問は、それがこれを行うことは可能ですかどうかである場合：単に、答えはFunction#bindと、そうである以上

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

...（spec | MDN）：

x.addEventListener('click', rotate.bind(null, i)); 

Function#bindリターン呼び出されたときにthisの値（最初の引数）とそれに続くbindの引数を指定して元の関数を呼び出す新しい関数（「バインド」関数）b yバインドされた関数が呼び出された引数。

Sincあなたはrotateにthisを使用していません。bindの最初の引数については何も指定しません。第2引数としてiをbindに渡すので、バインドされた関数が呼び出されたときの最初の引数として、rotateが表示されます。

---

コメントには、すべてのボタンで同じ変数を共有したいと言っています。その場合は、宣言したのと同じレベルで宣言してください。rotaterotateが閉じます。

// An inline-invoked scoping function to avoid creating blobals 
 
(function() { 
 
    // The variable they all share 
 
    var counter = 0; 
 
    
 
    // Hook up the buttons 
 
    var buttons = document.querySelectorAll("input[type=button]"); 
 
    Array.prototype.forEach.call(buttons, function(button) { 
 
    button.addEventListener("click", function() { 
 
     // Increment the shared variable 
 
     ++counter; 
 
     
 
     // Show it and the button that incremented it 
 
     console.log(this.value + " clicked, counter = " + counter); 
 
    }, false); 
 
    }); 
 
})();

<input type="button" value="Button 1"> 
 
<input type="button" value="Button 2"> 
 
<input type="button" value="Button 3">