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

Question

// отрывок
document.querySelectorAll('.lang button').forEach(b => b.addEventListener('click', getValue));

document.querySelector('#btn').addEventListener('click', createContent, { once: true });

function getValue(e) {
  // console.log(this.value);
  // это значение this.value передать в переменную hash для createContent()   
}

function createContent() {
  let hash = ''; // вот сюда!
  console.log(hash);
    // let unit;
    // if (hash == 'en') {
    //  unit = unitArr.en;
    // } else {
    //  unit = unitArr.ru;
    // }
  // unit.forEach((el) => {
  //  ...
  // }
}

<button id="btn">Click Me</button>

<div class="lang">
  <button value="en" id="lang-en">EN</button>
  <button value="ru" id="lang-ru">RU</button>
</div>

Answer 1

document.querySelectorAll('.lang button').forEach(b => b.addEventListener('click', getValue));

document.querySelector('#btn').addEventListener('click', function(e) { 
  createContent((document.querySelector('.lang button.active') || {}).value); 
});

function getValue(e) {
  document.querySelectorAll('.lang button.active').forEach(b => b.classList.remove('active'));
  this.classList.add('active');
  console.log("getValue -", this.value);
}

function createContent(language) {
  let hash = language; // вот сюда!
  console.log("createContent -", hash);
}

<button id="btn">Click Me</button>

<div class="lang">
  <button value="en" id="lang-en">EN</button>
  <button value="ru" id="lang-ru">RU</button>
</div>

при нажатии EN или RU меняется значение "createContent -"

Оно так не работает.

function getValue(e) {
  ...
 
  createContent(this.value);
}

Answer 2

Функции в JS имеют объектный тип, и (как любые другие объекты) могут иметь свойства.
Если функция объявлена локально - то вполне нормально использовать данную возможность языка, и обращаться с ней как к объектной переменной (но явно не стоит делать так с "чужими"/общими функциями... и нужно быть осторожным, чтобы случайно не перезаписать стандартное свойство!):

const createContent = () => {
  console.log(createContent.lang);
  // ...
};
const testBtn = document.querySelector('#btn');

document.addEventListener('click', evt => {
  if (evt.target.matches('.lang button')) {
    createContent.lang = evt.target.dataset.value;
    testBtn.disabled = false;
  }
});
testBtn.addEventListener('click', createContent, { once: true });

<button id="btn" disabled>Click Me</button>
<div class="lang">
  <button data-value="en" id="lang-en">EN</button>
  <button data-value="ru" id="lang-ru">RU</button>
</div>

Хотя, конечно, более распространена практика использования обычного объекта для хранения состояния. Нужно всего лишь обеспечить доступность этого объекта для всех использующих его функций - объявив в лексическом окружении "выше" их всех... либо (самый простой вариант) добавив объект состояния свойством window/global и назвав достаточно изощренно, чтобы избежать возможного конфликта имен:

window._myAwesomeAppState = {};
const createContent = () => {
  console.log(window._myAwesomeAppState.lang);
  // ...
};
const testBtn = document.querySelector('#btn');

document.addEventListener('click', evt => {
  if (evt.target.matches('.lang button')) {
    window._myAwesomeAppState.lang = evt.target.dataset.value;
    testBtn.disabled = false;
  }
});
testBtn.addEventListener('click', createContent, { once: true });

<button id="btn" disabled>Click Me</button>
<div class="lang">
  <button data-value="en" id="lang-en">EN</button>
  <button data-value="ru" id="lang-ru">RU</button>
</div>

БЛОГ НА HUSL

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

Ответы (2 шт):