I can not pass parameters to a function using addEventListener Javascript/Jquery

Question

I am doing a validator of images in BASE64 and I have problems to be able to pass parameters to my function.

Using pure javascript and using an event of type change and without parameters to the function, it is executed correctly. But when passing a parameter, it falls completely.

I have also tried to use jquery to handle the "Change" but I have not been successful either.

I have left the code as it works well and leave commented the parameter.

NEW: I have passed the function as callback, but now values ​​do not enter

 //USE THIS IMAGE FOR EXAMPLE https://i.imgur.com/GxUIEH2.png function validFile(parameter) { //if use change with jquery add parameter in validFile if (this.files && this.files[0]) { var pixels = parameter.split("x"); alert(pixels); var FR = new FileReader(); FR.onload = function(e) { /*To validation*/ var imgData = e.target.result; var segmentaImgData = imgData.trim().split("/"); var validaImg = segmentaImgData[1].substring(0, 3); if (validaImg == "jpg" || validaImg == "jpe" || validaImg == "png" || validaImg == "gif" || validaImg == "gif") { /*Start validating the image size*/ var iconoImagen = new Image(); iconoImagen.id = "miIcon"; iconoImagen.src = "" + imgData + ""; iconoImagen.onload = function() { if (this.width == 34 /*pixels[0]*/ && this.height == 26 /*pixels[1]*/) { /*If the image complies with the size, insert it in the input*/ $("#inputValueBase64").val(imgData); $("#txt").html(imgData) alert("The image meets the right size"); } else { alert("The image does not meet the right size"); return false; /**/ } }; } else { alert("unsupported format"); $("#inp").val(''); return false; } }; FR.readAsDataURL(this.files[0]); } else { alert("NOT PASS USING THIS METHOD"); } } document.getElementById("inp").addEventListener("change", function () {validFile('34x26')}, false); /*$("#inp").change(function () { alert("Changed!"); validFile('34x26') });*/ 

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="inp" type='file'> <input type="hidden" id="inputValueBase64"> <p id="txt"></p> 

Answer 1

Have a callback function and in that call your validFile() method.

 //USE THIS IMAGE FOR EXAMPLE https://i.imgur.com/GxUIEH2.png function validFile() { //if use change with jquery add parameter in validFile if (this.files && this.files[0]) { //var pixels = parameter.split("x"); var FR = new FileReader(); FR.onload = function(e) { /*To validation*/ var imgData = e.target.result; var segmentaImgData = imgData.trim().split("/"); var validaImg = segmentaImgData[1].substring(0, 3); if (validaImg == "jpg" || validaImg == "jpe" || validaImg == "png" || validaImg == "gif" || validaImg == "gif") { /*Start validating the image size*/ var iconoImagen = new Image(); iconoImagen.id = "miIcon"; iconoImagen.src = "" + imgData + ""; iconoImagen.onload = function() { if (this.width == 34 /*pixels[0]*/ && this.height == 26 /*pixels[1]*/) { /*If the image complies with the size, insert it in the input*/ $("#inputValueBase64").val(imgData); $("#txt").html(imgData) alert("The image meets the right size"); } else { alert("The image does not meet the right size"); return false; /**/ } }; } else { alert("unsupported format"); $("#inp").val(''); return false; } }; FR.readAsDataURL(this.files[0]); } else { alert("NOT PASS USING THIS METHOD"); } } document.getElementById("inp").addEventListener("change", function(){ validFile('pass here whatever you want'); }, false); /*$("#inp").change(function () { alert("Changed!"); validFile('34x26') });*/ 

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="inp" type='file'> <input type="hidden" id="inputValueBase64"> <p id="txt"></p> 

Answer 2

When you add an event listener, it receives the event as argument so you can get the target and check its attributes:

 function validFile(event) { if (event.target.files && event.target.files[0]) { //var pixels = parameter.split("x"); var FR = new FileReader(); FR.onload = function(e) { var imgData = e.target.result; var segmentaImgData = imgData.trim().split("/"); var validaImg = segmentaImgData[1].substring(0, 3); if (validaImg == "jpg" || validaImg == "jpe" || validaImg == "png" || validaImg == "gif" || validaImg == "gif") { /*Start validating the image size*/ var iconoImagen = new Image(); iconoImagen.id = "miIcon"; iconoImagen.src = "" + imgData + ""; iconoImagen.onload = function() { if (this.width == 34 /*pixels[0]*/ && this.height == 26 /*pixels[1]*/) { /*If the image complies with the size, insert it in the input*/ $("#inputValueBase64").val(imgData); $("#txt").html(imgData) alert("The image meets the right size"); } else { alert("The image does not meet the right size"); return false; /**/ } }; } else { alert("unsupported format"); $("#inp").val(''); return false; } }; FR.readAsDataURL(event.target.files[0]); } else { alert("NOT PASS USING THIS METHOD"); } } document.getElementById("inp").addEventListener("change", validFile, false); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="inp" type='file'> <input type="hidden" id="inputValueBase64"> <p id="txt"></p> 

Your code didn't work because the callback function was not bound to the input field, so that this.files was undefined .