解决温度转换器清空输入后显示NaN问题：将值设为0

问题核心：当输入框被清空时，parseFloat("")返回NaN，后续转换计算会生成NaN并填充到其他输入框。需要实现清空任意输入框时，所有输入框的值自动设为0的需求。

解决方案 #

通过在每个转换函数中添加输入值校验，当输入为空或无法转为有效数字时，直接将所有输入框重置为0；若输入有效，则正常执行转换逻辑。同时封装通用函数减少重复代码。

修改后的代码 #

temperature.html（无需修改）

<main role="main" class="container">

  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="card mt-4">
          <div class="card-body">
            <h1 class="text-center">Temperature</h1>
            <div class="row mt-4 justify-content-center">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="exampleInputEmail1">Celsius (°C)</label>
                  <input type="text" class="form-control" id="celsius" oninput="celToFar()" placeholder="Enter value">
                </div>
                <div class="form-group">
                  <label for="exampleInputEmail1">Fahrenheit (°F)</label>
                  <input type="text" class="form-control" id="fahrenheit" oninput="farToCel()" placeholder="Enter value">
                </div>
                <div class="form-group">
                  <label for="exampleInputEmail1">Kelvin (K)</label>
                  <input type="text" class="form-control" id="kelvin" oninput="KelToCel()" placeholder="Enter value">
                </div>
               </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

app.js（修改后）

const celsius = document.getElementById('celsius');
const fahrenheit = document.getElementById('fahrenheit');
const kelvin = document.getElementById('kelvin');

// 通用函数：获取有效数值，空值或无效值返回0
function getValidValue(input) {
  const value = parseFloat(input.value);
  return isNaN(value) ? 0 : value;
}

// 通用函数：重置所有输入框为0
function resetAllInputs() {
  celsius.value = 0;
  fahrenheit.value = 0;
  kelvin.value = 0;
}

function celToFar() {
  const celValue = getValidValue(celsius);
  // 若输入为空，直接重置所有框
  if (celsius.value.trim() === '') {
    resetAllInputs();
    return;
  }
  // celsius to fahrenheit
  let output = (celValue * 9/5) + 32;
  fahrenheit.value = output.toFixed(2);

  // celsius to kelvin
  let output2 = celValue + 273.15;
  kelvin.value = output2.toFixed(2);
}

function farToCel() {
  const farValue = getValidValue(fahrenheit);
  if (fahrenheit.value.trim() === '') {
    resetAllInputs();
    return;
  }
  // fahrenheit to celsius
  let output = (farValue - 32) * 5/9;
  celsius.value = output.toFixed(2);

  // fahrenheit to kelvin
  let output2 = (farValue - 32) * 5/9 + 273.15;
  kelvin.value = output2.toFixed(2);
}

function KelToCel() {
  const kelValue = getValidValue(kelvin);
  if (kelvin.value.trim() === '') {
    resetAllInputs();
    return;
  }
  // kelvin to celsius
  let output = kelValue - 273.15;
  celsius.value = output.toFixed(2);

  // kelvin to fahrenheit
  let output2 = (kelValue - 273.15) * 9/5 + 32;
  fahrenheit.value = output2.toFixed(2);
}

关键改动说明 #

1. getValidValue函数：统一处理输入值，将空值或非数字转为0，从根源避免NaN产生。
2. resetAllInputs函数：封装重置逻辑，减少重复代码，方便后续维护。
3. 空值判断逻辑：每个转换函数开头先检查当前输入框是否为空，若是则直接重置所有输入框，不再执行后续计算。
4. 简化计算流程：先获取有效数值再执行转换，避免重复调用parseFloat，提升代码可读性和执行效率。

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