동적으로 생성 된 버튼이 호출하는 함수를 변경하는 방법은 무엇입니까?

Question

문제가 생겼을 때 JavaScript로 약간의 게임을 만들었습니다. 이 게임에서는 for() 루프를 사용하여 백 개의 단추를 만듭니다. 결국 모든 버튼이 '클릭'이라는 함수를 호출하여 int를 보내어 어떤 버튼이 눌러 졌는지 알 수 있도록합니다. 예를 들어 버튼 4를 누르면 click (4)가 호출됩니다. 우선이 시도 : 분명히 그렇게 일을 내가 인터 웹을 검색하고 사이트에서이 질문에 대한 답을 세례반하지 않았다

object.onclick = "click(4)"; 

.

object.onclick = function() {click("4");} 

나는 (';'을 붙이거나 빼고) 시도했지만 작동하지 않는 것으로 나타났습니다. 더미 코드의

더 완벽한 개요 :

<script type="text/javascript"> 
    document.getElementById('myContainer').innerHTML += '<input id="tmp" type="button" value="button">'; 
    documengetElementById('tmp').onclick = function() {tmpFunc("bla");} 

function tmpFunc(vari){ 
    alert(vari); 
} 

</script> 

요소의 myContainer 100 % 비어 있습니다!

기억해보십시오.이 코드는 시험해보기위한 더미 코드입니다. 나는이 waaaaay를 더 쉽게 할 수 있었지만 처음에는 코드를 단순화하려고 노력 했으므로 지저분한 코드를 보지 않아도되었습니다.

그래서 for 루프에서 만든 버튼에서 함수를 호출하는 가장 좋은 방법은 무엇입니까? 내가 사용하는 것과 완전히 다른 방법을 알고 있다면, 어떻게 해결되는지 상관하지 않습니다! 나는 왜 누군가가 이것이 효과가 없는지 설명해주기를 바란다.

희망 나는 다른 질문에이 문제에 대해 주어진 해결책을 사용하고 있다는 것을 알고있는 한 이미 질문에 대답하지 않았습니다. ------------ UPDATE가 -------------

누군가로부터 답변을받은 후 그것을 조금 변경

. 이것은 현재 코드입니다. select()는 버튼을 눌렀을 때 실행되지 않습니다. 전체 자바 스크립트 코드가 있으므로 여기를 가지고 놀고 싶다면 복사하여 붙여 넣을 수 있습니다.

<script type="text/javascript"> 

function addButtons(){ 

    var disabled = false; 

    for(var i = 1; i <= 100; i++){ 

     currentButton = '<input id="tmp" type="button" onclick="select(\''+i+'\')">' 
     document.getElementById('myContainer').innerHTML += currentButton; 
     document.getElementById('tmp').id = 'btn'+i; 
     gb(i).disabled = disabled; 
     gb(i).style.width = "60px"; 
     gb(i).style.height = "60px"; 
     gb(i).style.fontSize = "25pt"; 

     function alerts(nr){ 
      alert("test"); 
     } 

     if(i%10 == 0){ 
      document.getElementById('myContainer').innerHTML = document.getElementById('myContainer').innerHTML + '<br />'; 
     }else{ 
      if(disabled){ 
       disabled = false; 
      }else{ 
       disabled = true; 
      } 
     } 

     if(i == 60){ 
      gb(i).value = 'O'; 
      gb(i).style.color = "blue"; 
     } 

     if(((i-1)%10 == 0) && !(gb(i).disabled)){ 
      gb(i).value = 'X'; 
      gb(i).style.color = "red"; 
     } 
    } 
} 

function select(nr){ 
    alert("Bla!"+nr); 
    gb(nr).style.height = "100px"; 
} 

function gb(ButtonNrVanHetButton){ 
    return document.getElementById('btn'+ButtonNrVanHetButton); 
} 

addButtons(); 

</script> 

대부분의 부품이이 바둑판처럼 보이도록 해야하는 문제 (스타일 등)를 해결하기위한 매우 흥미로운되지 않습니다.

------------ UPDATE는 -------------

해결! javascript 라이브러리가 이미 'select()'와 같은 다른 요소에 사용하는 함수를 사용하지 마십시오. 도와려는 모든 사람에게 Thx!

Answer 1

버튼을 만들기 위해 반복 할 때 버튼에 onclick을 추가하지 않는 이유는 무엇입니까? 예를

<script> 
// your function 
function tmpFunc(vari) 
{ 
    alert(vari); 
} 
// end your function 


// define xBUTTONS 
xBUTTONS = ''; 
for (i=0; i<100; i++) 
{ 
    // loop buttons 
    xBUTTONS += '<input id="tmp" type="button" value="button" onclick="tmpFunc(\''+i+'\')">'; 
} 

// insert buttons into myContainer 
document.getElementById('myContainer').innerHTML = xBUTTONS; 
</script> 

Answer 2

우선에 대한

항상 addEventListener를 사용하여 이벤트를 연결합니다. 두 번째로, 동적으로 생성하는 버튼에 ID를 추가하면 다음과 같이 할 수 있습니다.

function click(){ 
    alert(this.id+" clicked"); 
} 
var but; 
for (var i=0,e=100,i<e;++i){ 
    but=document.createElement("input"); 
    but.id=i; 
    ...//make it into your button 
    but.addEventListener("click", click, false); 
    document.body.appendChild(but); 
}