@elo-dev

Как передать переменную из одной функции в другую?

Мне нужно получить значение переменной в одной функции и сделать так, чтобы оно заработало в другой функции.
Это первая функция, в ней мне нужно получить значение url.
var blockPreview = document.querySelector('.wrapper__form__preview');

  document.getElementById("imageVideo").addEventListener('change',function (e){
    var url = window.URL.createObjectURL(e.target.files[0]);
    var img = document.createElement('img');
    img.id = 'form__imgPreview';
    blockPreview.insertAdjacentElement('beforeend', img);
    img.src = url;
    if(blockPreview.childElementCount > 1){
      blockPreview.firstChild.remove();
    }
  })

Затем вывести этот url в этой функции:
const addVideo = document.querySelector('.btn-success-form');

addVideo.addEventListener('click', function(event){
  event.preventDefault();
  var nameVideo = document.querySelector('.nameVideo').value;

  var input = document.querySelector('#imageVideo');
  var error = document.querySelector('.error');
  var curFile = input.files;

  if(nameVideo.length === 0){
    var errName = document.createElement('p');
    errName.textContent = 'Название не выбрано';
    error.appendChild(errName);
  }
  
  if(curFile.length === 0){
    var errFile = document.createElement('p');
    errFile.textContent = 'Файл для загрузки не выбран';
    error.appendChild(errFile);
  }

  const videoCard = `
    <div class="card">
    <img src="${Вот здесь использовать url}" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
  </div>
  `
})
  • Вопрос задан
  • 85 просмотров
Пригласить эксперта
Ответы на вопрос 3
dollar
@dollar
На чёткий вопрос - чёткий ответ.
Создайте глобальную переменную.
Давайте назовём её global_var

Тогда в первой функции делаем так:
function(e) {
  var url = .....
  window.global_var = url;
  .....
}


А во второй функции делаем так:
function(event) {
  var url = window.global_var;
  .....
}
Ответ написан
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
Вынесите объявление переменной в более глобальный скоуп. И обращайтесь к ней.
примерно так
let url; // Вынесли создание url в более глобальный скоуп
const blockPreview = document.querySelector('.wrapper__form__preview');

  document.getElementById("imageVideo").addEventListener('change',function (e){
    url = window.URL.createObjectURL(e.target.files[0]); // получили нужные данные
    let img = document.createElement('img');
    img.id = 'form__imgPreview';
    blockPreview.insertAdjacentElement('beforeend', img);
    img.src = url; // всё работает
    if(blockPreview.childElementCount > 1){
      blockPreview.firstChild.remove();
    }
  })

...

const addVideo = document.querySelector('.btn-success-form');

addVideo.addEventListener('click', function(event){
  event.preventDefault();
  let nameVideo = document.querySelector('.nameVideo').value;

  let input = document.querySelector('#imageVideo');
  let error = document.querySelector('.error');
  let curFile = input.files;

  if(nameVideo.length === 0){
    var errName = document.createElement('p');
    errName.textContent = 'Название не выбрано';
    error.appendChild(errName);
  }
  
  if(curFile.length === 0){
    let errFile = document.createElement('p');
    errFile.textContent = 'Файл для загрузки не выбран';
    error.appendChild(errFile);
  }

  const videoCard = `
    <div class="card">
    <img src="${url}" class="card-img-top" alt="..."> // Используем url
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
  </div>
  `
})

Если у вас эти две функции в разных модулях, то можно накидать простенький обсервер.
P. S. Вы используете var, это ключевое слово устарело.

Ссылки:
Устаревшее ключевое слово "var" (ru)
Обсервер (ru)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы