使用JS开发计算器：点击按钮无法在文本框输入小数点的问题

错误原因 #

你的输入框应该是type="number"类型，这种类型的输入框只接受可解析为有效数字的内容。像"5."这种末尾只有小数点的字符串，浏览器无法将其解析为合法数字，因此会拒绝更新输入框的显示值——这就是你看到alert里能拼接成功，但输入框没变化，还弹出警告的原因。

解决办法 #

方案1：将输入框改为文本类型（推荐）

把输入框的type属性从number改成text，这样可以自由输入任何格式的字符串，包括带末尾小数点的内容，后续计算时再做数值转换即可。

修改后的输入框代码：

<input type="text" name="dis" id="dis">

调整小数点函数，避免重复添加：

function display(n){
  document.cal.dis.value += n;
}

function dot1(){
  const currentVal = document.cal.dis.value;
  // 只有当前值不含小数点时才添加
  if (!currentVal.includes('.')) {
    document.cal.dis.value = currentVal + '.';
  }
}

方案2：保留number类型，做输入校验

如果一定要用number类型输入框，需要在添加小数点前做判断，确保生成的内容是浏览器可接受的格式：

function display(n){
  document.cal.dis.value += n;
}

function dot1(){
  const inputElem = document.cal.dis;
  let currentVal = inputElem.value;
  
  if (!currentVal) {
    // 输入框为空时，设置为"0."（避免直接输入"."）
    inputElem.value = "0.";
  } else if (!currentVal.includes('.')) {
    // 当前值不含小数点时才添加
    inputElem.value = currentVal + '.';
  }
}

补充说明 #

你alert里能看到拼接后的字符串，是因为document.cal.dis.value = ...这个赋值表达式会返回赋值后的结果，但浏览器发现这个结果不符合number类型输入框的规则，就会忽略这个赋值，所以输入框不会显示该内容。

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