从同类按钮中获取值

Question

我对这个脚本有问题
我不明白为什么Javascript不能识别pdb[I]

let pbd=document.getElementsByClassName('pbda');
for (var i=0;i<pbd.length;i++) {
pbd[i].addEventListener('click',function() {
let xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function() {
if (this.readyState==4&&this.status==200) {
document.getElementById('obxs').style.display='flex';
document.getElementById('obxd').innerHTML=this.responseText;
};
};
xhttp.open('POST','/ajax/orderdetails',true);
xhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhttp.send('oid='+pbd[i].value);
})
};

错误为->Uncaught TypeError:无法读取未定义的属性"value"在HTMLButtonElement上

Answer 1

当附加的事件侦听器实际运行时，i已变为pbd.length。因此，您正在访问一个未在pbd数组中定义的元素。

如果要访问其事件处理程序中的元素，可以使用this。

let buttons = document.querySelectorAll(".man");
for(var i = 0 ; i < buttons.length;i++){
buttons[i].addEventListener("click",function(){
console.log(this);
console.log(i);
});
}

<button class="man">A</button>
<button class="man">B</button>
<button class="man">C</button>
<button class="man">D</button>
<button class="man">E</button>

此外，您还可以用let替换var。let是块范围的，因此引用的i是来自该迭代的i。