JS实现CM/INCH互转 修改输入值后转换结果不变问题排查

代码存在3个问题导致功能异常：

• 变量取值时机错误：const numValue = inputNumber.value声明在函数外层，仅在页面初始加载时执行一次，会把当时输入框的值缓存成常量，后续修改输入框内容时这个值不会自动同步更新，所有计算都会一直使用第一次缓存的旧值。
• 结果渲染逻辑缺陷：每次触发转换都用appendChild插入新的结果节点，旧的计算结果不会被清除，会持续堆叠在结果区域。
• 转换逻辑错位：1英寸=2.54厘米，厘米转英寸应使用公式数值/2.54，英寸转厘米应使用公式数值*2.54，现有代码的公式和按钮绑定关系完全写反，转换结果不符合预期。

将取值逻辑移到转换函数内部，每次触发时实时读取输入框最新值，每次渲染前清空历史结果，修正转换公式，增加基础输入校验：

<input type="text" placeholder="please insert a number " id="inputNumber" />
<button type="button" onclick="cmToInch()">厘米转英寸</button>
<button type="button" onclick="inchToCm()">英寸转厘米</button>

<div id="result"></div>

<script>
  const result = document.getElementById("result");
  const inputNumber = document.getElementById("inputNumber");

  const cmToInch = () => {
    const numValue = inputNumber.value.trim();
    if (isNaN(Number(numValue)) || !numValue) {
      result.textContent = '请输入有效数字';
      return;
    }
    result.innerHTML = '';
    const resDiv = document.createElement("div");
    resDiv.textContent = `${numValue} cm = ${(Number(numValue) / 2.54).toFixed(2)} inch`;
    result.appendChild(resDiv);
  };

  const inchToCm = () => {
    const numValue = inputNumber.value.trim();
    if (isNaN(Number(numValue)) || !numValue) {
      result.textContent = '请输入有效数字';
      return;
    }
    result.innerHTML = '';
    const resDiv = document.createElement("div");
    resDiv.textContent = `${numValue} inch = ${(Number(numValue) * 2.54).toFixed(2)} cm`;
    result.appendChild(resDiv);
  };
</script>

• 移除全局的numValue常量，每次点击转换按钮时实时读取输入框最新值，保证计算用的是用户当前输入的内容
• 每次计算前清空结果容器的历史内容，避免多条结果堆叠
• 修正两个转换函数的计算公式，对齐按钮的功能描述
• 增加输入合法性校验，空值或非数字输入时给出提示，避免出现NaN等异常计算结果
• 计算结果保留2位小数，同时标注转换前后的单位，可读性更强

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