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

Question

Я пытаюсь создать простое приложение, которое генерирует случайный вопрос с помощью onclick и генерирует решение указанного вопроса с другим onclick. Мне удалось создать достаточно простую функцию случайного вопроса, но у меня проблемы с решением. По сути, я не могу получить доступ к переменным, созданным с помощью функции «сгенерировать вопрос».

Следующая функция генерирует случайный вопрос: «Преобразовать 10 мг / мл в мкг / мл»

const arr = ['mg/mL', 'mcg/mL', 'mg/L'];

function genConversion () {
  function clearBox(elementID){ //this resets the question
      document.getElementById(elementID).innerHTML = "";
  }

  clearBox('output');

  function shuffle(a) { 
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
  }

   function randomNum() {
    var number = Math.floor((Math.random() * 100) +1);
    return number
  }

  var num = randomNum()

  shuffle(arr);

  output.innerHTML += "Convert " + num + ' ' + arr[0] + ' to ' + arr[1]

}

Теперь, когда я пытаюсь создать функцию, которая решит сгенерированную проблему ( фактический logi c появится, когда я смогу выяснить, как получить доступ к переменным вопроса), я не могу получить доступ к переменной 'num'. Интересно, что я могу получить доступ к элементу случайного массива arr [0].

function solveProb() {
  console.log(arr[0]);
  console.log(num);
}

Я уверен, что это как-то связано с областью видимости, с которой у меня проблемы, но любые советы будут оценены.

Answer 1

На самом деле вы не хотите получать доступ к переменной вне функции. Вы уже думаете о функциях, поэтому можете воспользоваться моей библиотекой rubico . Вот ваш код в функциональном однонаправленном стиле потока данных. Кроме того, используйте let и const вместо var, чтобы избежать непредсказуемого поведения, связанного с областью видимости.

import { pipe, fork } from 'https://deno.land/x/rubico/rubico.js'
// if you're in the browser, use script type='module' for the import to work

const clearBox = elementID => {
  document.getElementById(elementID).innerHTML = "";
}

const shuffle = a => { 
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

const randomNum = () => {
  const number = Math.floor((Math.random() * 100) +1);
  return number
}

const arr = ['mg/mL', 'mcg/mL', 'mg/L']

const randomUnits = () => {
  return shuffle(arr)
}

const addQuestionOutputHTML = question => {
  output.innerHTML += question
  return question
}

// () => string
const generateQuestion = pipe([
  fork({
    num: randomNum, // () => num
    units: randomUnits, // () => shuffledArr
  }), // () => { num, units }
  ({ num, units }) => `Convert ${num}${units[0]} to ${units[1]}`, // { num, units } => string
  addQuestionOutputHTML, // string => string
])

generateQuestion() // => 'Convert 10mg/mL to mcg/mL'

Я добавил некоторые комментарии к коду c библиотеки, но на самом деле понять и начать использовать Rubico для себя, прочтите это интуиция , а затем документы

Answer 2

Как видите, arr - это глобальная переменная (не объявленная внутри какой-либо функции), но num объявлен внутри genConversion, следовательно, существует только там.

Answer 3

Просто определите вашу переменную над функцией как «let», а затем в функции измените переменную. Затем вызовите функцию. Затем вы можете получить доступ к обновленному значению переменной ВНЕ функции.

let a = null;
const func = () => a = 5;
func();
console.log(a); // 5

Answer 4

Просто объявите переменную num снаружи, а затем назначьте ей внутри genConversion, точно так же, как переменная arr объявляется снаружи:

const arr = ['mg/mL', 'mcg/mL', 'mg/L'];
let num;

function genConversion () {
  function clearBox(elementID){ //this resets the question
      document.getElementById(elementID).innerHTML = "";
  }

  clearBox('output');

  function shuffle(a) { 
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
  }

   function randomNum() {
    var number = Math.floor((Math.random() * 100) +1);
    return number
  }

  num = randomNum()
  shuffle(arr);

  output.innerHTML += "Convert " + num + ' ' + arr[0] + ' to ' + arr[1]
}

genConversion();
document.querySelector('button').addEventListener('click', () => {
  console.log('Random generation was: ', "Convert " + num + ' ' + arr[0] + ' to ' + arr[1]);
});

<div id="output"></div>
<button>click</button>