Is there a way that I can declare the variable outside function?

Question

Is there a way that I can declare a variable outside the function? $first and $second can't seem to read it outside the function. and 1 more thing .remove() doesn't work.

function addition(){
  let $first = parseInt($('#firstNum').val());
  let $second = parseInt($('#secondNum').val());
  $('h1').append($first + $second);
}
function subtraction(){
  let $first = parseInt($('#firstNum').val());
  let $second = parseInt($('#secondNum').val());
  $('h1').append($first - $second);
}
function multiplication(){
  let $first = parseInt($('#firstNum').val());
  let $second = parseInt($('#secondNum').val());
  $('h1').append($first * $second);
}
function division(){
  let $first = parseInt($('#firstNum').val());
  let $second = parseInt($('#secondNum').val());
  $('h1').append($first / $second);
}
function clear(){
  $('h1').remove();
}```

Nguyễn Văn Phong · Accepted Answer · 2021-01-06T04:25:05.330

1 more thing .remove() doesn't work.

You should clear empty instead of removing that element:

$("#btnClear").on("click", function(){
  $('h1').html('');
})

Besides, you should refactor your code like below:

$("#btnSubmit").on("click", function(){
  var firstNumber = parseInt($('#firstNum').val());
  var secondNumber = parseInt($('#secondNum').val());
  var operator = $("input[name='operator']:checked").val();
  var result = 0;
  switch(operator){
    case '+':
      result = addition(firstNumber, secondNumber);
      break;
    case '-':
      result = subtraction(firstNumber, secondNumber);
      break;
    case '*':
      result = multiplication(firstNumber, secondNumber);
      break;
    case '/':
      result = division(firstNumber, secondNumber);
      break;
  }
  
  $('h1').html(result);
});
function addition(firstNumber, secondNumber){
  return firstNumber + secondNumber;
}
function subtraction(firstNumber, secondNumber){
  return firstNumber - secondNumber;
}
function multiplication(firstNumber, secondNumber){
  return firstNumber * secondNumber;
}
function division(firstNumber, secondNumber){
  return firstNumber / secondNumber;
}

$("#btnClear").on("click", function(){
  $('h1').html('');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id ="firstNum" >
<input type="text" id ="secondNum" >
<a id="btnSubmit">Submit</a> 
<br>
<a><input name="operator" value = "+" type = "radio" checked/> + </a> <br>
<a><input name="operator" value = "-" type = "radio"/> - </a> <br>
<a><input name="operator" value = "*" type = "radio"/> * </a> <br>
<a><input name="operator" value = "/" type = "radio"/> / </a> <br>
Result: <h1></h1>
<a id="btnClear">Clear</a>

var operator = $("input[name='operator']:checked").val();.. what does the "checked means? — Bryan Gabay, Jan 06 '21 at 09:57
Oh, I want to get the value of the checked radio button. https://stackoverflow.com/questions/8622336/jquery-get-value-of-selected-radio-button — Nguyễn Văn Phong, Jan 06 '21 at 10:03

score 0 · Answer 2 · answered Jan 06 '21 at 04:06

You need to define your variables outside the functions.

Variable can be read in the current scope + inner scopes, but not outer scopes from which they are defined in.

let $first, $second;

function addition() {
  $first = parseInt($('#firstNum').val());
  $second = parseInt($('#secondNum').val());
  $('h1').append($first + $second);
}

MDN has a good article explaining scopes in JavaScript: https://developer.mozilla.org/en-US/docs/Glossary/Scope

Is there a way that I can declare the variable outside function?

2 Answers2