如何用JavaScript获取元素值并实现摄氏度与华氏度切换？

Hey Robert, let's work through this temperature conversion issue together! The core problem here is likely timing (trying to grab the temperature before the API loads it) or improper parsing of the value from the DOM element. Here's a step-by-step solution tailored to your setup:

1. Ensure You Access the Temperature After the API Loads It #

Weather API calls are asynchronous—if you try to read the #temp element before the API response arrives, it'll be empty. You need to initialize your toggle logic only after the API has populated the temperature value.

Example API integration with proper timing:

// Replace with your actual weather API endpoint
fetch("your-weather-api-url")
  .then((response) => response.json())
  .then((data) => {
    // Assume the API returns a Fahrenheit value (adjust based on your API's response)
    const initialTemp = data.main.temp;
    const tempElement = document.getElementById("temp");
    
    // Populate the DOM element with the initial temperature + unit
    tempElement.textContent = `${initialTemp.toFixed(1)}°F`;
    
    // Now initialize the toggle functionality—this ensures the temp value exists
    setupTemperatureToggle();
  })
  .catch((err) => console.error("Failed to load weather data:", err));

2. Properly Extract the Numeric Temperature Value #

The #temp element will have text like "75°F" or "24°C"—you need to strip the unit and parse the number first:

function getNumericTemp() {
  const tempElement = document.getElementById("temp");
  // Extract only the numeric part of the text content
  const rawValue = tempElement.textContent.replace(/[^0-9.-]/g, "");
  const numericTemp = parseFloat(rawValue);
  
  if (isNaN(numericTemp)) {
    console.error("Could not parse temperature value from DOM");
    return null;
  }
  return numericTemp;
}

3. Implement the Toggle Logic #

Add this function to handle the Celsius/Fahrenheit switch, using the class names you already have (farenheit/celcius) to track the current unit:

function setupTemperatureToggle() {
  const toggleButton = document.getElementById("your-toggle-button-id"); // Replace with your button's ID
  const tempElement = document.getElementById("temp");

  toggleButton.addEventListener("click", () => {
    const currentTemp = getNumericTemp();
    if (!currentTemp) return;

    if (tempElement.classList.contains("farenheit")) {
      // Convert Fahrenheit to Celsius: C = (F - 32) * 5/9
      const celsiusTemp = ((currentTemp - 32) * 5/9).toFixed(1);
      tempElement.textContent = `${celsiusTemp}°C`;
      tempElement.classList.remove("farenheit");
      tempElement.classList.add("celcius");
    } else {
      // Convert Celsius to Fahrenheit: F = C * 9/5 + 32
      const farenheitTemp = (currentTemp * 9/5 + 32).toFixed(1);
      tempElement.textContent = `${farenheitTemp}°F`;
      tempElement.classList.remove("celcius");
      tempElement.classList.add("farenheit");
    }
  });
}

4. Quick Debug Checks #

If it's still not working, run these in your browser's DevTools console (F12) to diagnose:

• document.getElementById("temp").textContent: Verify this returns a valid temperature value (not empty).
• Check the Network tab in DevTools to confirm your API request is successful and returns the expected temperature data.
• Ensure your toggle button exists in the DOM when setupTemperatureToggle() runs (no typos in the button ID).

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