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

Question

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

我的operationVal的值在进入click事件时丢失，并且if(operationVal == 0 )返回true 。 但是如果我在事件之前检查operationVal ，它具有选定的值。 此外，如果我在事件中编写了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;

在代码执行，而不是在当用户点击该按钮的未来时间的时间变选定的值。

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

Answer 2

但是如果我在事件之前检查operationVal，它具有选定的值。 此外，如果我在事件中编写了operation.options [operation.selectedIndex] .value而不是operationVal，则获取的值是正确的 。

看起来您的价值在click事件之前就已经改变了

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

因为上述行可能是在绑定页面上的事件时执行的。

设置operationVal ，当您从下拉列表中选择其他值时，它将不会自动刷新 。

您需要在事件处理程序中再次设置此值

btn.addEventListener('click', function(argument) {
  //observe this line
  operationVal = operation.options[operation.selectedIndex].value;
  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 3

设置operarionVal时，用户未选择它。 因此，您必须将属性const operationVal = operation.options[operation.selectedIndex].value; 在函数内部。

Answer 4

加载页面时设置了operationVal值。 并且在您的选择框值更改时不会更新，因此operationVal的值保持不变

你需要搬家

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

单击事件列表器可以解决问题

const firstNumber = document.getElementById('tbFirstNumber');
const secondNumber = document.getElementById('tbSecondNumber');
const operation = document.getElementById('ddlOperation');
let 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)) {
    operationVal = operation.options[operation.selectedIndex].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;
});