编写两数比较函数问题：求和、积与比较功能故障排查

嘿，我来帮你搞定这个比较功能的bug！从你的描述来看，大概率是输入值类型处理不当或者比较结果的展示逻辑有问题，下面是修正后的完整代码，以及关键细节的说明：

完整代码示例 #

HTML部分 #

<div class="container">
  <div class="main">
    <h1>Please enter two numbers</h1>
    <p>First number: <input type="number" id="num1">&nbsp;&nbsp; Second number: <input type="number" id="num2"></p>
    <button onclick="calculate()">Calculate</button>
    <!-- 用来展示结果的容器 -->
    <div id="result" style="margin-top: 20px;"></div>
  </div>
</div>

JavaScript部分 #

function calculate() {
  // 关键：把输入的字符串转为数字类型，避免字符串比较的错误
  const num1 = parseFloat(document.getElementById('num1').value);
  const num2 = parseFloat(document.getElementById('num2').value);

  // 保留你已实现的求和与乘积功能
  const sum = num1 + num2;
  const product = num1 * num2;

  // 修正后的两数比较逻辑，覆盖所有场景
  let comparisonResult;
  if (num1 > num2) {
    comparisonResult = `${num1} is greater than ${num2}`;
  } else if (num1 < num2) {
    comparisonResult = `${num1} is less than ${num2}`;
  } else {
    comparisonResult = `${num1} is equal to ${num2}`;
  }

  // 一次性展示所有计算结果
  const resultContainer = document.getElementById('result');
  resultContainer.innerHTML = `
    <p><strong>Sum:</strong> ${sum}</p>
    <p><strong>Product:</strong> ${product}</p>
    <p><strong>Comparison Result:</strong> ${comparisonResult}</p>
  `;
}

关键修正说明 #

• 数值类型转换：输入框默认返回字符串，直接用字符串比较会出现"10" < "2"这类错误，必须用parseFloat或Number()转为数字后再计算。
• 完整比较逻辑：覆盖了大于、小于、等于三种情况，不会遗漏两数相等的场景。
• 统一结果展示：通过innerHTML把三个结果一次性插入页面容器，确保点击按钮时所有内容同时显示。

你直接替换原有代码测试，应该就能正常运行啦～

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