Following 3 block of code, want to generate using loop/array to make short code.I know use of loop is not a big thing, but for me its difficult to change counter with variable "openFile", I want counter increment with variable "openFile" like openFile1, openFile2 and openFile3 with each iteration of loop.

$(function() {

            var openFile1 = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img1');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };



      var openFile2 = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img2');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };

      var openFile3 = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img3');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };


       });

Following 3 block of code, want to generate using loop/array to make short code.I know use of loop is not a big thing, but for me its difficult to change counter with variable "openFile", I want counter increment with variable "openFile" like openFile1, openFile2 and openFile3 with each iteration of loop.

$(function() {

            var openFile1 = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img1');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };



      var openFile2 = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img2');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };

      var openFile3 = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img3');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };


       });

• javascript
• jquery
• arrays
• arraylist

• The line has an obvious error var openFile'+i+'; = function(event) {. Remove the '+i+'; – forumulator Commented Dec 24, 2017 at 23:13
• @forumulator, I just want to change openFile1,openFile2,openFile3,openFile4,openFile5 and openFile6 with each loop iteration. – Muhammad Bilal Commented Dec 24, 2017 at 23:18
• What's your intent, what're you trying to do with six functions, exaclty? You can't do what you're describing. Best case scenario, create an array and add functions to that. – forumulator Commented Dec 24, 2017 at 23:21
• @user123: nope, bad idea. Use an array instead. openFile[0], openFile[1], etc. – Sergio Tulentsev Commented Dec 24, 2017 at 23:21
• @Sergio Tulentsev, question updated, please answer – Muhammad Bilal Commented Dec 25, 2017 at 0:25

4 Answers 4

Just create a function that takes count as arg and return a function that takes just event as arg. due to closure, the value of 'count' given when calling openFile with a given value of count will be used for the inner function.

  var openFileFunc = function(count) {
    return
        function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img'+(count+1));
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[count]);
      };
    }

Now you can get the three functions equivalent to what you did by calling a map like this:

var functions = [1,2,3].map(openFileFunc)

Each function in this array is the same as what you had.

var openFile = function(arrOfCount){
    var reader; 
    for(i=0;i<arrOfCount;i++){
       reader= new FileReader();
       return  function(event){
             var input = event.target;
             reader.onload = function(){
                  var dataURL = reader.result;
                  var output = document.getElementById('img'+(i+1));
                  output.src = dataURL;
              };
            reader.readAsDataURL(input.files[i]);
          }
      }
}

May be this will work for you.

function callFunctionNtimes(totalCount){

        for(start=1;i<=totalCount;i++)
        {
            var filevar = 'openFile'+start;
            filevar = function(event) 
            {
                var input = event.target;
                var reader = new FileReader();
                reader.onload = function()
                {
                    var dataURL = reader.result;
                    var output = document.getElementById('img'+start);
                    output.src = dataURL;
                };
                    reader.readAsDataURL(input.files[0]);
            };
        }
     }
       //to call n time below function  
       var totalCount = 3;
       callFunctionNtimes(totalCount);

I have tried to generalize code

 var allImages = document.getElementsByClassName("my-images");
 for (var i = 0; i < allImages.length; i++) {
      var openFile = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = allImages[i];
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);

}

But still it seems you have 3 file upload controls and you want to display preview for each, is it so?