浏览器不保留JavaScript输出：温度计算器结果瞬间消失

嘿，我来帮你搞定这个温度计算器的问题！你的结果瞬间消失、浏览器自动刷新的核心原因，还有代码里的几个小bug我都找到了，咱们一步步来解决：

1. 最关键的问题：表单默认提交导致页面刷新 #

你用了<form>里的<input type="submit">按钮，点击它的时候浏览器会默认提交表单并刷新页面，这就是为什么计算结果刚显示就消失了。解决方法有两种，选一种就行：

方法一：把submit按钮改成普通按钮 #

把原来的submit输入改成button类型，这样就不会触发表单提交：

<input type="button" value="Calculate" onclick="myFunction()">

方法二：阻止表单的默认提交行为 #

如果非要用submit按钮，就在myFunction里阻止默认事件，或者在onclick里返回false：

<input type="submit" value="Submit" onclick="myFunction(); return false;">

或者在JS函数里接收event参数并调用preventDefault()：

function myFunction(event) {
  event.preventDefault(); // 阻止默认提交行为
  // 后面的代码保持不变
}

2. JS代码里的语法&逻辑错误 #

除了刷新问题，你的JS还有几个小问题会导致计算错误或者逻辑失效：

• elseif拼写错误：JavaScript里正确的写法是else if（分开写），不是elseif。
• 多余的分号：比如elseif (calc_type === "fahrenheit");这里的分号会让后面的代码块独立执行，完全忽略前面的条件判断。
• 字符串转数字：输入框获取的degrees是字符串类型，直接参与计算会出问题，要转成数字（用Number(degrees)或者parseFloat(degrees)）。
• 温度转换公式错误：比如Kelvin转Celcius是K - 273.15，Fahrenheit转Celcius是(F - 32) / 1.8，你的代码里有些公式写错了。

修正后的完整代码 #

HTML部分 #

<html>
<body>
  <form>
    <label for="degrees">Degrees: </label>
    <input type="text" name="degrees" id="degrees">
    <label for="calc_type">Type: </label>
    <select name="calc_type" id="calc_type">
      <option value="celcius">Celcius</option>
      <option value="kelvin">Kelvin</option>
      <option value="fahrenheit">Fahrenheit</option>
    </select>
    <!-- 改成普通button避免默认提交 -->
    <input type="button" value="Calculate" onclick="myFunction()">
  </form>
  <table style="width: 200px">
    <tr>
      <th>Celcius: </th>
      <td id="celsius_value">0</td>
    </tr>
    <tr>
      <th>Fahrenheit: </th>
      <td id="fahrenheit_value">0</td>
    </tr>
    <tr>
      <th>Kelvin: </th>
      <td id="kelvin_value">0</td>
    </tr>
  </table>
  <script src="js/celcius_calulator.js"></script>
</body>
</html>

（顺便修正了table的tr/td标签错误，原来的结构有点混乱）

JS部分 #

function myFunction() {
  // 把输入转成数字，避免字符串计算问题
  const degrees = parseFloat(document.getElementById('degrees').value);
  const calc_type = document.getElementById('calc_type').value;

  if (calc_type === "celcius") {
    cC(degrees);
  } else if (calc_type === "fahrenheit") { // 修正elseif拼写+去掉多余分号
    fC(degrees);
  } else if (calc_type === "kelvin") { // 去掉多余分号
    kC(degrees);
  }
}

function cC(degrees) {
  const celcius = degrees;
  const kelvin = degrees + 273.15; // 修正公式：C转K是+273.15
  const fahrenheit = degrees * 1.8 + 32;

  document.getElementById('celsius_value').innerHTML = celcius.toFixed(2);
  document.getElementById('fahrenheit_value').innerHTML = fahrenheit.toFixed(2);
  document.getElementById('kelvin_value').innerHTML = kelvin.toFixed(2);
}

function fC(degrees) {
  const celcius = (degrees - 32) / 1.8; // 修正F转C的公式
  const kelvin = celcius + 273.15; // 先转成C再转K更准确
  const fahrenheit = degrees;

  document.getElementById('celsius_value').innerHTML = celcius.toFixed(2);
  document.getElementById('fahrenheit_value').innerHTML = fahrenheit.toFixed(2);
  document.getElementById('kelvin_value').innerHTML = kelvin.toFixed(2);
}

function kC(degrees) {
  const celcius = degrees - 273.15; // K转C的正确公式
  const fahrenheit = celcius * 1.8 + 32; // 先转C再转F更准确
  const kelvin = degrees;

  document.getElementById('celsius_value').innerHTML = celcius.toFixed(2);
  document.getElementById('fahrenheit_value').innerHTML = fahrenheit.toFixed(2);
  document.getElementById('kelvin_value').innerHTML = kelvin.toFixed(2);
}

这样修改后，页面就不会刷新了，计算结果也能正确显示，公式也都准确啦！

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