从相同的 class 按钮获取值

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: Cannot read 属性 'value' of undefined 在 HTMLButtonElement.

Answer 1

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

如果要访问 its 事件处理程序中的元素，可以使用 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>

您也可以将 var 替换为 let。 let 是块范围的，因此 i 引用的是该迭代中的 i。

从相同的 class 按钮获取值

Get values from same class buttons

javascript

class

button

click

buttonclick