JavaScript 天气应用程序当您单击它时，我想将温度从 C 更改为 F它不工作

如何解决JavaScript 天气应用程序当您单击它时，我想将温度从 C 更改为 F它不工作

当浏览器检测到位置（通过允许位置使用纬度和经度）并且切换良好时，它工作得非常好。当我使用 API 获取城市温度的详细信息时它不起作用，它只为某些城市切换一次。对于某些城市，它运行良好，而对于某些城市，它仅以华氏度显示。

let loc =document.getElementById("location");
let tempicon=document.getElementById("temp-icon");
let tempvalue=document.getElementById("temp-value");
let climate =document.getElementById("climate");
let iconfile;
let tempunit = document.getElementById("temp-unit");
let tempSection=document.querySelector('.temp-section');
const searchInput=document.getElementById("search-input");
const searchButton=document.getElementById("search-button");

//Accept the City
searchButton.addEventListener('click',(e)=>
{

e.preventDefault();
getWeather(searchInput.value);
searchInput.value='';

});

//Celsius to Fahrenheit
function celsiusToFahrenheit (temperature){
    return (temperature *9/5)+32;
}


// for any particular city
const getWeather=async (city)=>
{
    try{

        const response= await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid={key}`,{mode: 'cors'}
        );

        const weatherData= await response.json();
        console.log(weatherData);
        const{name}=weatherData;
        const{feels_like}=weatherData.main;
        const{id,main}=weatherData.weather[0];
        loc.textContent=name;
        climate.textContent=main;
        tempvalue.textContent=Math.round(feels_like-273).toFixed(2);
        
        tempSection.addEventListener('click',function() {
            if(tempunit.textContent === "°C"){
                let fahrenheit = (celsiusToFahrenheit(feels_like-273)).toFixed(2);
                tempunit.textContent="F";
                tempvalue.textContent=fahrenheit;
            }else{
                tempunit.textContent="°C";
                tempvalue.textContent=(feels_like-273).toFixed(2);   
            }
            
        });
        
    }
catch(error)
{
    alert('city not found');
}

};

<!DOCTYPE html>
<html>
    <title>Weather app</title>
    <head>
        <link rel="stylesheet" href ="../assets/css/Weather_app.css">
        <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    </head>

    <body>

        <form id="search-form">
            <input type="search"
            placeholder="Enter City Name"
            id="search-input"
            required
            autocomplete="off"
            />
            <br>
        </br>
        <button id="search-button">Search</button>

        </form>


        <main id="app-container">
            <div id="location">
                <p>-------</p>
            </div>
                <div id="temp">
                    <img id="temp-icon" src="../assets/Images/weather_icons/sun.svg" alt="">
                    <div class="temp-section"><span id="temp-value">-----</span> <span id="temp-unit" >°C</span> </div>
                </div>

                <div id="climate">
                    <p>------</p>
                </div>
        </main>

<script src="../assets/js/Weather_app.js">

</script>
    </body>

</html>

解决方法

温度有华氏、摄氏和开尔文单位。风速以英里/小时和米/秒为单位。

对于以华氏度为单位的温度和以英里/小时为单位的风速，请使用单位=英制对于以摄氏度为单位的温度和以米/秒为单位的风速，请使用单位=公制默认使用以开尔文为单位的温度和以米/秒为单位的风速，因此如果需要，无需在 API 调用中使用单位参数

例如：单位=英制

sudo apt-get install openjdk-7-jdk