使用Ajax调用OpenWeather API，温度切换按钮逻辑异常求助

Hey there! Let's figure out why your Celsius/Fahrenheit toggle only works once—this is a super common pitfall, and I’ll walk you through the most likely logic flaws to check in your code.

Common Logic Mistakes to Look For #

1. You’re Overwriting the Original Celsius Value #

The biggest culprit here is usually losing track of the original temperature data from the API. If you’re updating the same variable with converted values each time you click the button, you’ll never be able to switch back properly.

For example, this broken logic overwrites the original Celsius value on the first toggle:

// ❌ Bad: Overwriting the only temperature variable
let currentTemp = 22; // Initial Celsius value from API

function toggleTemp() {
  if (/* assuming current is Celsius */) {
    currentTemp = (currentTemp * 9/5) + 32; // Convert to Fahrenheit, lose original Celsius
  } else {
    currentTemp = (currentTemp - 32) * 5/9; // Now converting Fahrenheit → Celsius (wrong base value!)
  }
}

Fix: Store the original Celsius temperature in a separate, unmodified variable (like originalCelsiusTemp). All conversions should use this base value instead of the displayed temperature.

2. You’re Using Temperature Values to Guess the Current Unit #

Trying to determine if you’re in Celsius or Fahrenheit by checking the displayed number is unreliable (e.g., 32°F equals 0°C—your code might mix these up). Instead, use a dedicated state variable to track the current unit.

For example, this flawed logic guesses based on values:

// ❌ Bad: Using temperature value to infer unit
function toggleTemp() {
  const displayedTemp = parseFloat(document.getElementById("temp").textContent);
  // This check will fail for overlapping values like 0°C/32°F
  if (displayedTemp <= 100) { 
    // Convert to Fahrenheit
  } else {
    // Convert to Celsius
  }
}

Fix: Add a boolean variable like isCelsius (initialized to true since OpenWeather returns Celsius by default). Flip this variable every time the button is clicked, then calculate the temperature based on this state.

3. Your DOM Update and State Are Out of Sync #

If you update the temperature number but forget to update the unit label (e.g., switching from "°C" to "°F") or vice versa, your state variable and what’s displayed might not match. This leads to the toggle logic using incorrect information on the next click.

Example of Working Logic #

Here’s a simplified version of how to structure your code correctly, so you can compare it to your own:

// Store the original Celsius temp from API (never modify this!)
let originalCelsius = null;
// Track current unit state
let isCelsius = true;

// After fetching data via Ajax:
function handleWeatherData(data) {
  originalCelsius = data.main.temp; // Save raw Celsius value
  updateTemperatureDisplay();
}

// Toggle button click handler
function toggleTempUnit() {
  isCelsius = !isCelsius; // Flip the state
  updateTemperatureDisplay();
}

// Update the DOM based on current state
function updateTemperatureDisplay() {
  const tempElement = document.getElementById("temp");
  const unitElement = document.getElementById("temp-unit");

  if (isCelsius) {
    tempElement.textContent = originalCelsius.toFixed(1);
    unitElement.textContent = "°C";
  } else {
    const fahrenheit = (originalCelsius * 9/5) + 32;
    tempElement.textContent = fahrenheit.toFixed(1);
    unitElement.textContent = "°F";
  }
}

Next Steps for Your Code #

Go through your function and check:

• Do you have a persistent variable storing the original Celsius temperature from the API?
• Are you using a clear state variable (like isCelsius) to track the current unit, instead of guessing from displayed values?
• Are all temperature calculations based on the original Celsius value, not the converted displayed value?

Once you fix these pieces, your toggle should work smoothly in both directions!

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