函数中丢失的 JavaScript 全局变量值

Question

我有一个相当简单的问题。

我的 operationVal 的值在进入点击事件时丢失并且 if(operationVal == 0 ) 返回 true。但是，如果我在事件发生之前检查 operationVal 它具有选定的值。此外，如果我在 if 中编写 operation.options[operation.selectedIndex].value 而不是 operationVal ，则抓取的值是正确的值。

如果有人向我解释为什么会这样，我将不胜感激。我假设它与 JavaScript 范围有关，但它对我来说没有意义。

const firstNumber = document.getElementById('tbFirstNumber');
const secondNumber = document.getElementById('tbSecondNumber');
const operation = document.getElementById('ddlOperation');
const operationVal = operation.options[operation.selectedIndex].value;
const btn = document.getElementById('btnExecute');
const display = document.getElementById('display');

let result = '';

const regNumbers = /[0-9]{1,}/;

btn.addEventListener('click', function(argument) {
  if (regNumbers.test(firstNumber.value) && regNumbers.test(secondNumber.value)) {
    if (operationVal == 0) {
      alert(operationVal);
      result = 'Operation has not been chosen';
    } else {
      switch (operationVal) {
        case 'add':
          result = 'Result is: ' + (firstNumber.value + secondNumber.value);
          break;
        default:
          // statements_def
          break;
      }
    }
  } else {
    result = 'Number entry is not correct.';
  };

  display.innerHTML = result;
});

Answer 1

下面一行:

operationVal = operation.options[operation.selectedIndex].value;

在此代码执行时获取所选值，而不是在 future 用户单击按钮时获取。

简单的解决方案是将此行移动到事件监听器回调函数中。