onclick 함수를 실행 중입니다. 모든 버튼을 클릭했습니다

Question

나는 많은 버튼이 class="clearSelect"입니다. 나는이 버튼들이 onclick 함수를 실행하기를 원한다. 나는 자바 스크립트에 익숙하지 않다. 왜 이런 일이 일어나고 있는지 모르지만, 내 함수가 실행되는 대신 실행되고 있다고 생각한다. onclick

아래의 코드는 모든 다른 버튼을 클릭하게 만드는 코드이다. 당신은 모든 버튼에 이벤트를 연결할 때 루프에 대한에서

function clearOrSelectAll(btn) { 
    var cleartab = clearButtonSet[btn]; 
    var selecttab = selectButtonSet[btn]; 
    // console.log("clicked!"); 
    if (cleartab != null) { 
     getOSList(cleartab, false); 
    } else { 
     getOSList(selecttab, true); 
    } 
} 

function getOSList(tabVal, fate) { 
    var configTab = document.getElementById(tabVal); 
    var browserList = configTab.getElementsByClassName("browser_list"); 
    // var idObjs = browserList.getElementsByTagName("li"); 
    for (var h = 0; h < browserList.length; h++) { 
     var idObjs = browserList[h].getElementsByTagName("li"); 
     // console.log(h); 
     // console.log(idObjs); 
     // select all 
     if (fate) { 
      for (var i = 0; i < idObjs.length; i++) { 
       if (configs[idObjs[i].id] == null) { 
        idObjs[i].className = "selected"; 
        configs[idObjs[i].id] = config_dictionary[idObjs[i].id]; 
       } 
      } 
     // clear all 
     } else { 
      for (var j = 0; j < idObjs.length; j++) { 
       if (configs[idObjs[j].id] == null) { 
        idObjs[j].className = "unselected"; 
        delete configs[idObjs[j].id]; 
       } 
      } 
     } 
    } 
} 

Answer 1

당신이 clearOrSelectAll 함수를 호출된다 :

코드 :

var buttons = document.getElementsByClassName("clearSelect"); // objects with class="clearSelect" 

for (var i = 0; i < buttons.length; i++) { 
    var button = buttons[i]; 
    // button.addEventListener("onclick", clearOrSelectAll(button.id)); 
    button.onclick = clearOrSelectAll(button.id); 
} 

다음은 호출되는 기능은 다음과 같습니다. 이벤트가 발생했을 때만 호출되도록 익명 함수로 래핑하려고합니다.

// Non-ideal solution: see edit 
button.onclick = function() { 
    clearOrSelectAll(button.id); 
} 

EDIT : 이는 이벤트 핸들러가 온 클릭 속성 또는 addEventListener 메소드에 의해 부착 할 때 '이'컨텍스트 변수가 문제의 한 요소를 가리 것으로 지적되었다. 그래서 당신이 폐쇄 대신 '버튼'을 사용하는 대신 자바 스크립트 엔진을 너무 많이 사용하도록 신경 쓰지 않는다면 (아마도 ' 이벤트가 호출되는 시점에서 버튼 '.

button.onclick = function() { 
    clearOrSelectAll(this.id); 
}; 

Answer 2

@Christopher는 듯했으나 button.id는 this.id해야한다.

button.onclick = function() { 
    clearOrSelectAll(this.id); 
} 

button.id이 작동하지 않는 이유는이 코드를 입증 할 수 :

개

var buttons= document.getElementsByTagName('button'); 
 

 
for (var i = 0; i < buttons.length; i++) { 
 
    var button = buttons[i]; 
 
    button.onclick = function() { 
 
    alert(button.id); 
 
    } 
 
}

<button id="B1">Button 1</button> 
 
<button id="B2">Button 2</button> 
 
<button id="B3">Button 3</button>

각 버튼을 반환하는 변수 button이 할당 된 마지막 객체이기 때문에 "B3".