jQuery实现Celsius/Fahrenheit温度转换时第二个按钮点击异常修复

问题根源 #

• 事件绑定嵌套：按钮2的点击事件被写在了按钮1的点击回调内部，只有触发过一次按钮1的点击，按钮2的事件才会完成绑定，这是点击第二个按钮无响应的核心原因。
• 函数未正确调用：代码中let theNumber = temperatureF是将函数本身赋值给变量，没有执行函数获取计算结果，需要补括号改为temperatureF()才能拿到转换后的数值。
• jQuery选择器错误：给输出区域加样式时的选择器$("output1")漏了id选择器标识#，正确写法是$("#output1")，否则提示样式不会生效。

修复后完整JS代码 #

HTML部分无需调整，直接替换原有JS代码即可正常运行：

function temperatureF() {
  let x = document.getElementById('value').value;
  let result = (9 / 5 * x) + 32;
  // toFixed(2)为可选配置，用于保留两位小数，避免出现过长浮点数
  return result.toFixed(2);
}

function temperatureC() {
  let y = document.getElementById('value').value;
  let result = (y - 32) * 5 / 9;
  return result.toFixed(2);
}

// 两个按钮的点击事件分开绑定，互不依赖
$("#theButton1").click(function() {
  let theNumber = temperatureF();
  $('#output1').html(theNumber);
  $("#output1").addClass("alert alert-success");
});

$("#theButton2").click(function() {
  let theNumber = temperatureC();
  $('#output2').html(theNumber);
  $("#output2").addClass("alert alert-success");
});

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