JavaScript实现交互数字对求和程序的开发与代码优化

• 循环退出逻辑完全失效：代码拿到输入后立刻将内容转为数字，输入"quit"会被转成NaN，永远匹配不到退出判断条件，循环无法正常终止
• 未满足功能拆分要求：没有独立的求和函数，相加逻辑直接耦合在输入主流程中，不符合“独立函数实现两数相加、接收两个数字入参返回结果”的要求
• 输入校验缺失：用户输入非数字内容时没有做拦截，计算结果会出现NaN这类无效值
• 输出逻辑存在缺陷：一是要求用户结束输入后再统一输出所有数字对与求和结果，原代码是输入一组就立刻写入页面；二是document.write在页面渲染完成后调用，会直接清空整个页面的原有内容
• 边界场景未覆盖：不管用户在第一个还是第二个输入框输入"quit"，都应该立刻终止流程，原代码会先弹完两个输入框才做判断，打断体验差

// 独立求和函数：接收两个数字入参，返回计算结果
function calculateSum(numA, numB) {
  return numA + numB;
}

function startInteractiveSum() {
  // 存储所有有效数字对的计算记录
  const calcRecords = [];
  let keepRunning = true;

  while (keepRunning) {
    // 读取第一个数字输入
    const firstInput = prompt("请输入第一个数字，或输入quit结束计算：");
    // 若输入为quit，直接终止循环
    if (firstInput.trim().toLowerCase() === "quit") {
      keepRunning = false;
      break;
    }
    // 校验第一个输入是否为合法数字
    const num1 = Number(firstInput);
    if (Number.isNaN(num1)) {
      alert("输入无效，请输入有效数字或quit");
      continue;
    }

    // 读取第二个数字输入
    const secondInput = prompt("请输入第二个数字，或输入quit结束计算：");
    // 若输入为quit，同样终止循环
    if (secondInput.trim().toLowerCase() === "quit") {
      keepRunning = false;
      break;
    }
    // 校验第二个输入是否为合法数字
    const num2 = Number(secondInput);
    if (Number.isNaN(num2)) {
      alert("输入无效，请输入有效数字或quit");
      continue;
    }

    // 调用独立求和函数计算，存入结果记录
    const sumVal = calculateSum(num1, num2);
    calcRecords.push(`${num1} + ${num2} = ${sumVal}`);
  }

  // 全部输入结束后，统一渲染所有计算结果
  const resultBlock = document.createElement("div");
  resultBlock.innerHTML = "<h4>本次计算的所有结果：</h4>" + calcRecords.map(record => `<p>${record}</p>`).join("");
  document.body.appendChild(resultBlock);
}

// 页面加载完成后自动启动交互流程
window.addEventListener("load", startInteractiveSum);

• 持续引导用户输入成对数字，任意一个输入框收到"quit"（自动忽略大小写、去除首尾空格）就立刻终止输入流程
• 独立的calculateSum函数专门负责两数相加逻辑，与输入、输出流程完全解耦
• 对所有输入做合法性校验，无效数字输入会给出提示，不会产生错误计算结果
• 输入过程中不打断渲染流程，等用户全部结束输入后，统一展示所有已输入数字对与对应的求和结果，不会破坏原有页面结构

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