클릭 한 버튼의 ID 가져 오기 javascript

Question

클릭 한 버튼의 ID를 가져 와서 경고를 사용하여 표시하려고합니다. 아래 코드는 addEventListener으로 시도하고, 그렇지 않으면 attachEvent으로 되돌아갑니다. ID를 얻으려면 this.id을 매개 변수로 myFunction에 전달하려고합니다. 그러나 이것은 작동하지 않습니다. 나는 Jquery와 같은 것을 사용하여 많은 훌륭한 솔루션을 보았지만, 불행히도 이것을 위해 평범한 JS 만 사용해야한다. 클릭 한 버튼의 ID를 가져와 표시 할 변수에 저장하려면 어떻게해야합니까?

function addEvents() 
{ 
    var buttonArray=document.getElementsByClassName('mainButton'); 
    for(i=0; i < buttonArray.length; i++) 
    { 
     if (document.addEventListener) { 
     buttonArray[i].addEventListener("click", myFunction(this.id)); 
     } else if (document.attachEvent) { 
     buttonArray[i].attachEvent("onclick", myFunction(this.id)); 
} 

function myFunction(clickedId) { 
    alert("Button" + clickedId + "was clicked."); 
} 
} 
    } 

Answer 1

Element.prototype.addEvent = function(eventName, callFunction) { 
 
    if (this.addEventListener) this.addEventListener(eventName.substring(2), callFunction, false); 
 
    else if (this.attachEvent) this.attachEvent(eventName, callFunction); 
 
}; 
 

 

 
function clicked(e) { \t 
 
    alert(this.id); 
 
} 
 

 

 
document.getElementById('myButton').addEvent('onclick', clicked);

<input id="myButton" type="button" value="Click me">

은 실제로 당신이 myFunction에 인수를 전달할 필요가 없었다. 그것은 콜백 함수이며 이벤트 변수를 사용할 수 있습니다.

function addEvents() 
{ 
    var buttonArray = document.getElementsByClassName('mainButton'); 
    for(i = 0; i < buttonArray.length; i++) 
    { 
     if (document.addEventListener) { 
      buttonArray[i].addEventListener("click", myFunction); 
     } 
     else { 
      if (document.attachEvent) { 
       buttonArray[i].attachEvent("onclick", myFunction); 
      } 
     } 
    } 
} 

function myFunction(e) { 
    alert("Button " + e.target.id + " was clicked."); 
} 

여기는 jsfiddle입니다.

Answer 2

는 다음과 같이 코드를 수정해야합니다

function addEvents() 
{ 
    var buttonArray = document.getElementsByClassName('someclass'); 

    for(i=0; i < buttonArray.length; i++) 
    { 
     if (document.addEventListener) { 
      buttonArray[i].addEventListener("click", myFunction); 
     } else if (document.attachEvent) { 
      buttonArray[i].attachEvent("onclick", myFunction); 
     } 

     function myFunction(e) { 
      alert("Button" + e.target.id + "was clicked."); 
     } 
    } 
} 

하여 myFunction은 따라서 콜백의 목적을 물리 치고 함수를 호출했다하여 myFunction (ID)를 사용하여 콜백 함수입니다.

Answer 3

현재이 코드는 페이지의 mainButton 버튼을 반복하며 각 버튼에 대해 myFunction을 호출하고 이벤트 리스너를 myFunction의 반환 값으로 설정합니다. myFunction이 아무것도 반환하지 않기 때문에 이벤트 리스너도 아무것도 설정되지 않습니다.

if (document.addEventListener) { 
    buttonArray[i].addEventListener("click", 
     function() { myFunction(this.id); }); 
} 
else if (document.attachEvent) { 
    buttonArray[i].attachEvent("onclick", 
     function() { myFunction(this.id); }); 
} 

또한 아마 루프의 외부가되도록하여 myFunction의 선언을 이동보다 더 낫다 것 : 아마 당신이 찾고있는 것을 대신,이 같은 것입니다.

Answer 4

이 시도 :