Get values from same class buttons

Question

I have a problem with this script.
I don't understand why Javascript doesn't recognize 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);
  })
};

Error is -> Uncaught TypeError: Cannot read property 'value' of undefined at HTMLButtonElement.

Answer 1

When your attached event listener actually runs, i has become pbd.length. So you are accessing an element which is not defined in your pbd array.

If you want to access an element in its event handler, you can use 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>

Also you could have replaced var with let. let is block scoped so the i referred is the i from that iteration.