Невозможно объявить переменную в обратном вызове в приложении Rails - PullRequest
Новая
       22

Невозможно объявить переменную в обратном вызове в приложении Rails

0 голосов
/ 17 апреля 2020

В настоящее время я работаю над приложением Rails 6 с использованием trubolinks. Я работаю над функцией замены заполнителя аватара на изображение, выбранное при загрузке. Однако происходит что-то странное. Я объявляю две переменные, одна из которых указана со значением, которого нет. 

document.addEventListener('readystatechange', event => {
 if (event.target.readyState === "complete") { 

/**
 * Display the image in the file input when added to the form.
 * Replace avatar with image selected.
 */
  const profileAvatarBlock = document.getElementById('profile-avatar');

  function showImage(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        let avatarPreview = document.getElementById('profile-avatar-preview');
        let img =avatarPreview.children[1].setAttribute("src", e.target.result);

        debugger;
        ['width', 'height'].forEach(attribute => { 
          img.removeAttribute(attribute)
        });
        debugger;
      };

      reader.readAsDataURL(input.files[0]);
    }
  }

  profileAvatarBlock.addEventListener('change', function() {
      showImage(this);
  })
 }
});

Сначала я подумал, что это из-за турболинков, поэтому я добавил "turbolinks:load",, но это ничего не изменило. Когда я проверяю avatarPreview, я возвращаюсь обратно в отладчик, но когда я проверяю img, я получаю неопределенное значение. если я запускаю avatarPreview.children[1].setAttribute("src", e.target.result);, я также получаю его возвращенным, но если я присвоил его img, он не работает.

Почему я не могу объявить переменную внутри обратного вызова? Я хочу понять, что меня не волнует, как заставить его работать.

enter image description here

1 Ответ

1 голос
/ 17 апреля 2020

Вы звоните setAttribute, чтобы присвоить e.target.result атрибуту src элемента. Затем вы присваиваете возвращаемое значение из этой функции (которое всегда неопределено) для img.

Попробуйте вместо этого: 

let img = e.target.result

Если вы действительно хотите получить значение из дети, вы можете попробовать 

let img = avatarPreview.children[1].getAttribute('src')`
...