点击按钮时如何清空type为number的input输入框内容

你当前代码不生效的核心错误是：你先把输入框的value属性值读取出来存到了局部变量里，后续修改的只是局部变量的内容，完全没有操作真实DOM元素的属性。相当于你抄了一份输入框内容的副本，把副本擦除了，实际输入框里的内容没有任何改动，哪怕你给局部变量赋值null也不会影响输入框本身。

写法1：逐个指定输入框清空 #

直接获取DOM元素的引用，直接修改元素本身的value属性即可：

const clearBtn = document.querySelector("#clearBtn");
// 提前缓存需要操作的DOM元素，避免每次点击重复查询
const totalInput = document.getElementById("total");
const downInput = document.querySelector("#down");
const interestInput = document.querySelector("#interest");
const durationInput = document.querySelector("#duration");
const resultArea = document.getElementById("paragraph-value");
const alertArea = document.getElementById("alert");

clearBtn.addEventListener("click", function () {
  // 直接给DOM元素的value赋值空字符串完成清空
  totalInput.value = "";
  downInput.value = "";
  interestInput.value = "";
  durationInput.value = "";
  // 可选：同步清空之前的计算结果和提示信息
  resultArea.textContent = "";
  alertArea.textContent = "";
});

写法2：批量选择输入框清空 #

如果后续需要新增输入字段，不需要逐个加选择器，可以直接批量选中容器内所有数字输入框统一处理：

const clearBtn = document.querySelector("#clearBtn");

clearBtn.addEventListener("click", function () {
  // 选中计算器下所有数字类型输入框，遍历清空
  document.querySelectorAll('.calculator input[type="number"]').forEach(inputEl => {
    inputEl.value = "";
  });
  // 清空结果和提示
  document.getElementById("paragraph-value").textContent = "";
  document.getElementById("alert").textContent = "";
});

• 清空输入框请赋值空字符串""，不要赋值null：null赋值给value属性时会被自动转为字符串"null"，直接显示在输入框里，达不到清空效果
• 如果你的按钮放在<form>表单内部，请给Clear按钮加上type="button"属性，否则按钮默认会触发表单提交导致页面刷新，看起来就像清空功能失效

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