I am creating a series of buttons dynamically. How can I add a parameter to the Event Listener this.Purchase below as follows: this.Purchase(i)? Simply adding "(i)" does not work.
for (var i = 0; i < size; i++) {
var button = document.createElement('input')
button.setAttribute('type', 'submit')
button.setAttribute('value', 'Purchase')
button.addEventListener('click', this.Purchase)
}
var thing = {
Purchase: function() {
console.log(this.getAttribute('data-index'));
}
};
for (var i = 0; i < 3; i++) {
var button = document.createElement('input');
button.setAttribute('type', 'submit');
button.setAttribute('value', 'Purchase');
button.setAttribute('data-index', i);
button.addEventListener('click', thing.Purchase);
document.body.appendChild(button);
}An example of using a data attribute with the event handler, as I mentioned in the comments.
Add a data attribute to each button, and call the purchase function in the onclick callback using the this keyword:
var size = 3
for (var i = 0; i < size; i++) {
var button = document.createElement('input')
button.setAttribute('type', 'submit')
button.setAttribute('value', 'Purchase')
button.dataset.idx = i
button.addEventListener('click', function() {
purchase(this.dataset.idx)
})
document.body.appendChild(button)
}
function purchase(idx) {
console.log(idx)
}
this or an attribute of this to the function.addEventListener('click', this.Purchase) as the OP had it is calling another method when the click happens. Since the function is called via the event handler attached to the button clicked, the this inside the execution of the Purchase method will be the button clicked, not the element the function was originally attached to.
() => this.Purchase(i)button.setAttribute('data-index', i)and use that from within the event handler instead.