有没有办法可以在 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();
}```

Answer 1

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>

Answer 2

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