JS+HTML下拉式计算器结果值被重置问题求助

问题根源是点击等于号（submit类型按钮）时，表单会触发默认的提交行为，页面会重新加载（或跳转到eval.html），导致刚设置的结果被清空——虽然控制台能输出正确结果，但页面刷新后状态直接重置了。

下面是几种简单可行的修复方式：

方式1：阻止submit按钮的默认提交行为 #

直接修改等于号按钮的onclick事件，在执行计算后返回false，拦截表单提交：

<input type="submit" id="eq" name="Eq" value="=" onclick="Calculate(); return false;" />

或者在Calculate函数中通过事件对象阻止默认行为：

function Calculate(event) {
  var n1 = parseFloat(document.getElementById('n1').value);
  var n2 = parseFloat(document.getElementById('n2').value);
  var op = document.getElementById('op').value;
  if (isNaN(n1) || isNaN(n2)) return;
  
  eval('var r =' + n1 + op + n2);
  console.log(r);
  document.getElementById('res').value = r;
  
  // 阻止表单默认提交
  if (event) event.preventDefault();
}

对应按钮需传递事件参数：

<input type="submit" id="eq" name="Eq" value="=" onclick="Calculate(event)" />

方式2：将submit按钮改为普通button按钮 #

如果不需要表单提交功能，直接把按钮类型从submit改成button，点击时只会执行计算逻辑，不会触发表单提交：

<input type="button" id="eq" name="Eq" value="=" onclick="Calculate()" />

额外优化：替换eval函数（安全性提升） #

eval存在安全风险且可读性差，建议用switch语句替代运算逻辑：

function Calculate() {
  var n1 = parseFloat(document.getElementById('n1').value);
  var n2 = parseFloat(document.getElementById('n2').value);
  var op = document.getElementById('op').value;
  if (isNaN(n1) || isNaN(n2)) return;
  
  let r;
  switch(op) {
    case '+': r = n1 + n2; break;
    case '-': r = n1 - n2; break;
    case '*': r = n1 * n2; break;
    case '/': 
      r = n2 !== 0 ? n1 / n2 : '错误（除以0）'; 
      break;
    default: r = '';
  }
  console.log(r);
  document.getElementById('res').value = r;
}

内容的提问来源于stack exchange，提问作者pppptttt