JS events question - Storing prompted values and recalling them later

Question

trying to build myself a calculator which takes two prompted numbers then to have a separate set of buttons to evaluate them

the problem i've encountered is the following, i take the prompted number1 and number2 and save them as variables, BUT when i try to summon the variables inside an external function, it tells me the variables (number1 and number2) are not defined

any help?

ps: i've started working on the addition button, then will add sub/mult/div, just need to get the first one going

// the user is required to choose two sets of numbers that are then stored as variables
function numRequest() {
  var number1 = prompt('choose the first number to evaluate:');
  var number2 = prompt('choose the second number to evaluate:');
  // just an external checker to see if the prompt is being saved 
  console.log('first choice --> ' + number1);
  console.log('second choice --> ' + number2);
  // the numbers, stored as variables, are displayed on the calculator window
  document.getElementById('resBanner').innerHTML = ('you chose ' + number1 + ' and ' + number2);
}

// this is where the problem arises
// when i press the button that summons the function addition(), the two numbers arent
// defined for some reason 
function addition() {
  var res = Number(number1) + Number(number2);
  document.getElementById('resBanner').innerHTML = res;
}

// function subtraction() {}

// function division() {}

// function multiplication() {}

The variables are declared local to the `numRequest` function. You need to make them global variables so they can be accessed by both functions. — Barmar, Nov 07 '20 at 10:06
Does this answer your question? [How to make a local variable into a global in JavaScript](https://stackoverflow.com/questions/27887884/how-to-make-a-local-variable-into-a-global-in-javascript) — tevemadar, Nov 07 '20 at 10:09
While that's a duplicate itself, you simply have to scroll less there. — tevemadar, Nov 07 '20 at 10:10
@Barmar cheers, so does that work on new functions as well? can the new functions use the same value from the global variables? — DrFaraday, Nov 14 '20 at 10:24
Global variables are accessible to all functions. @DrFaraday — Barmar, Nov 14 '20 at 14:43

score 1 · Answer 1 · answered Nov 07 '20 at 10:09

Try this way.

// the user is required to choose two sets of numbers that are then stored as variables
let number1;
let number2;

function numRequest() {
  number1 = prompt('choose the first number to evaluate:');
  number2 = prompt('choose the second number to evaluate:');
  // just an external checker to see if the prompt is being saved 
  console.log('first choice --> ' + number1);
  console.log('second choice --> ' + number2);
  // the numbers, stored as variables, are displayed on the calculator window
  document.getElementById('resBanner').innerHTML = ('you chose ' + number1 + ' and ' + number2);
}

// this is where the problem arises
// when i press the button that summons the function addition(), the two numbers arent
// defined for some reason 
function addition() {
  var res = Number(number1) + Number(number2);
  document.getElementById('resBanner').innerHTML = res;
}

// function subtraction() {}

// function division() {}

// function multiplication() {}

score 1 · Accepted Answer · answered Nov 07 '20 at 10:11

Move number1 and number2 to the global scope to access outside of the numRequest function.

// the user is required to choose two sets of numbers that are then stored as variables
var number1, number2;
function numRequest() {
  number1 = prompt('choose the first number to evaluate:');
  number2 = prompt('choose the second number to evaluate:');
  // just an external checker to see if the prompt is being saved 
  console.log('first choice --> ' + number1);
  console.log('second choice --> ' + number2);
  // the numbers, stored as variables, are displayed on the calculator window
  document.getElementById('resBanner').innerHTML = ('you chose ' + number1 + ' and ' + number2);
}

// this is where the problem arises
// when i press the button that summons the function addition(), the two numbers arent
// defined for some reason 
function addition() {
  var res = Number(number1) + Number(number2);
  document.getElementById('resBanner').innerHTML = res;
}

numRequest();
addition();

// function division() {}

// function multiplication() {}

<div id='resBanner'>
</div>

JS events question - Storing prompted values and recalling them later

2 Answers2