function for changing background image :
function backgroundChange(checkDay) {
if (checkDay === 0) {
document.body.style.backgroundImage = "url('night.jpg')";
} else if (checkDay === 1) {
document.body.style.backgroundImage = "url('day.jpg')";
}
}
function for getting result from api
api used is : https://rapidapi.com/weatherapi/api/weatherapi-com/
i have used realtime weather api function for axios(js) straight from above link
const options = {
method: "GET",
url: "https://weatherapi-com.p.rapidapi.com/current.json",
params: { q: "Los angeles" },
headers: {
"X-RapidAPI-Key": "API_KEY",
"X-RapidAPI-Host": "weatherapi-com.p.rapidapi.com"
}
};
var checkDay;
axios
.request(options)
.then(function (response) {
console.log("-->", response.data.current.is_day);
checkDay = response.data.current.is_day;
console.log(checkDay);
})
.catch(function (error) {
console.error(error);
});
The same code you provided is working for me. Please check that you have some component(and style attached to it) set that overlap body completely.
Here is what I tried, Just change API_key and it will work:
function getWeatherInfo() {
var location = document.getElementById("location").value;
var options = {
method: "GET",
url: "https://weatherapi-com.p.rapidapi.com/current.json",
params: { q: location },
headers: {
"X-RapidAPI-Key": "API_Key",
"X-RapidAPI-Host": "weatherapi-com.p.rapidapi.com",
},
};
console.log(options);
var checkDay;
axios
.request(options)
.then(function (response) {
console.log("-->", response.data.current.is_day);
checkDay = response.data.current.is_day;
console.log(checkDay);
document.getElementById("results").innerHTML = JSON.stringify(response);
if (checkDay === 0) {
document.body.style.backgroundImage = "url('night.jpg')";
} else if (checkDay === 1) {
document.body.style.backgroundImage = "url('day.jpg')";
}
})
.catch(function (error) {
console.error(error);
});
}body{
background-color: lightseagreen;
}
#results{
height:600px;
width:100%;
background-color: white;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="getWeather.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>Weather</h1>
<input id="location" type="text" value="Los Angeles" placeholder="enter location here">
<button onclick="getWeatherInfo()">Get Weather Info</button>
<main>
<code id="results"></code>
</main>
</body>
</html>