Multiple javascript upload buttons only putting content in one

Question

I'm trying to make two upload buttons. One is for an account logo.

          .col-sm-6
            .wrapper
              Account Logo
              #account_logo
                = image_tag @account.logo.url, :class => 'account_logo'
                = file_field_tag 'account[logo]', :accept => 'image/png,image/jpeg'
                %a.btn.btn-default{:href => '#'} Choose file
                %span.notice
                  Only PNG or JPG please.

The other is for an email logo.

          .col-sm-6
            .wrapper
              Email Logo
              #email_logo
                = image_tag @account.email_logo.url, :class => 'email_logo'
                = file_field_tag 'account[email_logo]', :accept => 'image/png,image/jpeg'
                %a.btn.btn-default{:href => '#'} Choose file
                %span.notice
                  Only PNG or JPG please.

I've added javascript so it works for both. However, there is something very wrong going on. I've added alerts to try and debug and they tell me that it's all going into #email_logo even when I click on the #account_logo button. Can some javascript wizard please help me?

              :javascript
                var logo = ["#account_logo", "#email_logo"];

                for (var i = 0; i < logo.length; i++) {
                  var on_change = (logo[i] + ' input[type=file]');
                  var on_click = (logo[i] + ' a.btn');
                  var logo_img = (logo[i] + ' img');

                  $(document).on('click', on_click , function() {
                    alert("it is now " + on_click);
                    $(on_change).click();
                    alert("it is now " + on_change);
                  });
                  $(document).on('change', on_change, function() {
                    alert("it is now " + on_change);
                    var filelist = $(this).get(0).files;
                    var reader = new FileReader();
                    reader.onload = function (e) {
                      var url = e.target.result;
                      alert("it is now " + logo_img);
                      $(logo_img).attr('src', url);
                    }
                    reader.readAsDataURL(filelist[0]);
                  });
                }

Answer 1

It might be because you are using a for(var i = ...) {} loop construct instead of logo.forEach(function(element) { ... }).

The reason this might be happening is because JavaScript does not have block scoping but function scoping, which means your loop variable i is available in the entire function, and your .on('change', ...) handlers will refer to this i as a variable, not as whatever value that variable had when you registered the handler.

Try using a logo.forEach(function(element) { ... } construct, and instead of setting var on_change = (logo[i] + 'input[type=file]');, do var on_change = (element + 'input[type=file]');.