Pass a Variable in Function in an addEventListener

Question

How do I pass one variable on the function previewImages?

document.querySelector('#file-input0').addEventListener("change", previewImages,false);
document.querySelector('#file-input1').addEventListener("change", previewImages,false);

I want this script to call the function:

function previewImages(i){
        var preview = document.getElementById("preview"+i);
        if (this.files) {
          [].forEach.call(this.files, readAndPreview);
        }}

Everytime I tried this I cant achieve passing the variable value. I want to implement this in pure javascript.

Do you mean passing the variable value to `document.querySelector...` ? — David R, Jul 06 '18 at 07:11
No. I mean like setting a variable in the document.querySelector... and pass it to the function previewImages() — Erlisar Vasquez, Jul 06 '18 at 07:14

score 2 · Accepted Answer · answered Jul 06 '18 at 07:12

2

You can declare a function directly as a handler and call the function previewImages from inside of it.

document.querySelector('#file-input0').addEventListener("change", function() {
  previewImages(0);
}, false);

document.querySelector('#file-input1').addEventListener("change", function() {
  previewImages(1);
}, false);

answered Jul 06 '18 at 07:12

Ele

33,468
7
37
75

@ErlV can you explain, why this didn't work? – Ele Jul 06 '18 at 07:18
IT WORKS. I tried displaying the value in an alert and it indeed passes the value. Great thanks. – Erlisar Vasquez Jul 06 '18 at 07:23

Pass a Variable in Function in an addEventListener

1 Answers1