Question

我有很多按钮class="clearSelect"。我希望这些按钮执行一个函数onclick。我是javascript的新手并不太确定为什么会这样，但我认为我的函数正在执行而不是只执行onclick

下面的代码是调用我的所有其他功能，导致每个按钮被点击。

代码：

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);
}

这些是被调用的函数：

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

@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>

每个按钮返回“B3”，因为这是变量button被分配到的最后一个对象。

Answer 2

在将事件附加到所有按钮的for循环中，您正在调用clearOrSelectAll函数。您可能希望将其包装在匿名函数中，以确保仅在事件触发时调用它。

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

编辑：有人指出，当通过onclick属性或addEventListener方法附加事件处理程序时，'this'上下文变量将指向有问题的元素。因此，如果您要引用它而不是使用“按钮”作为闭包并且依赖于javascript引擎而不是过多地优化循环（因为这会混淆'的价值'），它可能会更清晰（并且更容易阅读）在调用事件时按钮'。

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

运行功能onclick。单击所有按钮

2 个答案: