javascript - 如何修复未定义的 "Cannot read property ' getAttribute'？

Question

我正在尝试制作一个简单的计算器，但在尝试使用 getAttribute 方法检索我的自定义 data-* 属性后卡住了。

我确保用于存储元素的 var 确实包含它们

<button type="button" class="btn btn-orange" data-num="*">*</button>

var btns = document.querySelectorAll(".btn");
for(var i = 0; i < btns.length; i++){
    btns[i].addEventListener("click", function(){
        var number = btns[i].getAttribute("data-num");
        screen.value += number;
    });
}

class="btn"的按钮一共有15个。我检查了控制台，btns 确实包含 15 个元素。我不明白为什么 getAttribute("data-num") 在我单击具有指定类的任何按钮时返回未定义。

Answer 1

您可以在函数定义中使用 this 而不是 btns[i] ，如下所示:

var btns = document.querySelectorAll(".btn");
for(var i = 0; i < btns.length; i++){
    btns[i].addEventListener("click", function(){
        var number = this.getAttribute("data-num");
        screen.value += number;
    });
}

基本上，您已经为每个按钮创建了 click 事件函数，并且您在这些函数中使用了 i。当这个函数执行时，它检查 i 值，这将是循环的最后一个值，(如果你有 6 个 .btn 类，那么 i 将有 6) 因为您没有将 i 当前值与函数绑定(bind)。所以在每次点击时，您将获得最后一个值，这将破坏代码。

为避免这种情况，您可以使用上面的代码，也可以在函数中绑定(bind)变量，如下所示:

var btns = document.querySelectorAll(".btn");
for(var i = 0; i < btns.length; i++){
    btns[i].addEventListener("click", function(iBindededValue){
        var number = btns[iBindededValue].getAttribute("data-num");
        screen.value += number;
    }.bind(this, i));
}

在这里，我们可以将 i 与每个函数的当前值绑定(bind)在一起，并可以使用它。您可以引用绑定(bind)功能来检查其功能。希望它能帮助你理解它的流程，干杯!!