我怎么能改变我的文本HTML元素时，它的内部取回API?

Question

我连接天气API，我想改变我的主。innerText到天气主体，例如:Clouds所以当我在我的网站上做了改动之后我不知道怎么解决

const options = {
method: "GET",
headers: {
"X-RapidAPI-Key": "beb6daec47msh27687ff8b153d6dp18f96djsnfe889c799384",
"X-RapidAPI-Host": "open-weather13.p.rapidapi.com",
},
};
const CityInput = document.getElementById("input");
const btn = document.getElementById("search");
const Cityname = document.getElementById("cityname");
const main = document.getElementById("main");
const Temp = document.getElementById("Temp");
btn.addEventListener("click", Citytemp);
function Citytemp() {
fetch(
"https://api.openweathermap.org/data/2.5/weather?    q=london&appid=a8e71c9932b20c4ceb0aed183e6a83bb&units=imperial",
options
)
.then((response) => response.json())
.then((json) => {
main.innerText = json.main.temp;
});
Cityname.innerHTML = CityInput.value;
}
`
should h4 element change to the main : clouds (json.weather[0].main)

Answer 1

您可以使用Catch块来查看API请求的问题。然而，在这种情况下，你不需要传递头信息。

const options = {
method: "GET",
headers: {
"X-RapidAPI-Key": "beb6daec47msh27687ff8b153d6dp18f96djsnfe889c799384",
"X-RapidAPI-Host": "open-weather13.p.rapidapi.com",
},
};
const btn = document.getElementById("search");
const main = document.getElementById("main");
btn.addEventListener("click", Citytemp);
function Citytemp() {
fetch(
"https://api.openweathermap.org/data/2.5/weather?q=london&appid=a8e71c9932b20c4ceb0aed183e6a83bb&units=imperial"
)
.then((response) => response.json())
.then((json) => {
main.innerText = json.main.temp;
}).catch((error) => {
console.log(error)
});
}

<h1 id='main'>Click below to update</h1>
<button id='search'>Click</button>