如何为JavaScript计算器实现表单内容清空按钮？

你的现有clear函数只清空了结果显示区域，没有重置两个数字输入框的内容，而且clear是浏览器的内置函数，直接使用可能引发命名冲突。以下是修正后的实现方案：

修改后的JavaScript代码 #

// 给函数改名，避免和内置clear方法冲突
function resetCalculator() {
  // 清空两个输入框的内容
  document.getElementById("firstNumber").value = "";
  document.getElementById("secondNumber").value = "";
  // 清空结果显示区域
  document.getElementById("result").innerHTML = "";
  // 可选：让第一个输入框重新获得焦点，提升操作流畅度
  document.getElementById("firstNumber").focus();
}

// 优化原有运算函数，添加变量声明避免全局污染
function addBy() {
  const num1 = document.getElementById("firstNumber").value;
  const num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = +num1 + +num2;
}

function substractBy() {
  const num1 = document.getElementById("firstNumber").value;
  const num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = +num1 - +num2;
}

function multiplyBy() {
  const num1 = document.getElementById("firstNumber").value;
  const num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = num1 * num2;
}

function divideBy() {
  const num1 = document.getElementById("firstNumber").value;
  const num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = num1 / num2;
}

对应修改HTML中的清空按钮 #

将清空按钮的onClick事件绑定到新函数：

<form>
  1st Number : <input type="number" id="firstNumber" /><br> 
  2nd Number: <input type="number" id="secondNumber" /><br>
  <input type="button" onClick="addBy()" value="Add" /><br>
  <input type="button" onClick="substractBy()" value="Substract" /><br>
  <input type="button" onClick="multiplyBy()" Value="Multiply" /><br>
  <input type="button" onClick="divideBy()" Value="Divide" /><br>
  <input type="button" onClick="resetCalculator()" value="Clear" /><br>
</form>
<!-- 确保页面存在结果显示元素 -->
<div id="result"></div>

关键说明 #

• 清空输入框需要设置input元素的value属性为空字符串，不能只操作结果区域
• 避免使用clear作为函数名，它属于浏览器Window对象的内置方法，可能导致函数无法正常执行
• 给运算函数里的变量添加const声明，防止全局变量污染，提升代码健壮性

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