按钮触发页面刷新而非元素修改，温度切换状态无法保持问题求助

嘿，我来帮你搞定这两个问题！咱们一步步拆解调整：

问题1：点击按钮刷新整个页面 #

这个问题大概率是因为你的按钮默认是提交按钮类型（<button>标签默认type="submit"），如果它嵌套在<form>标签里，点击时会触发表单提交，直接导致页面刷新。另外你的代码结构也有小问题——$.getJSON写在了$(document).ready()外面，这会导致DOM还没加载完成就执行请求，可能找不到页面上的#temperature或#button元素。

解决办法：

• 给按钮加上type="button"属性，明确它不是提交按钮；
• 把所有DOM相关的代码（包括请求和事件绑定）都放进$(document).ready()里，确保DOM加载完成后再执行；
• 或者在点击事件里调用event.preventDefault()，强制阻止默认的提交行为。

问题2：温度切换后保持状态 #

现在你的celsius变量作用域只在getJSON回调函数里，而且页面刷新会直接重置变量状态。咱们需要调整变量作用域，提前计算并保存华氏度和摄氏度的值，确保切换状态能持续保留，直到再次点击按钮。

修改后的完整代码 #

$(document).ready(function() {
  // 提前声明变量，让点击事件能持续访问
  let currentTempC;
  let currentTempF;
  let isCelsius = true;

  // 发起天气数据请求
  $.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=&lon=", function(json) {
    currentTempC = json.main.temp;
    currentTempF = (currentTempC * 1.8) + 32;
    // 初始化显示摄氏度，加上单位更清晰
    $("#temperature").html(currentTempC.toFixed(1) + " °C");
  });

  // 绑定按钮点击事件
  $("#button").on("click", function(event) {
    // 阻止默认行为（彻底避免页面刷新）
    event.preventDefault();
    
    isCelsius = !isCelsius;
    if (isCelsius) {
      $("#temperature").html(currentTempC.toFixed(1) + " °C");
    } else {
      $("#temperature").html(currentTempF.toFixed(1) + " °F");
    }
  });
});

关键改动说明 #

• 把所有代码放进$(document).ready()，确保DOM加载完成后再操作页面元素；
• 将温度值和状态变量isCelsius提升到ready回调的作用域里，让点击事件能持续访问；
• 给温度值加上单位，用toFixed(1)保留一位小数，显示更友好；
• 在点击事件里添加event.preventDefault()，彻底阻断页面刷新的可能；
• 如果你的按钮不在表单里，也可以给按钮标签加上type="button"（比如<button id="button" type="button">切换温度</button>），双重保险避免意外刷新。

这样修改后，点击按钮就只会切换温度显示，不会刷新页面，而且温度状态会一直保持，直到你再次点击切换按钮~

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