How to method to change HTML background according to API result value?

Question

I create web application used HTML, CSS, JS (not jQuery) with openweathermap API. I want to change the background depending on the weather.

But I've tried a lot, but it didn't work. The js file is one main.js file.

This is the JS code.

function displayResults(weather) {
  var city = document.querySelector(".city");
  city.innerHTML = weather.name + ", " + weather.sys.country;

  let now = new Date();
  let date = document.querySelector(".location .date");
  date.innerHTML = dateBuilder(now);

  let temp = document.querySelector(".current .temp");
  temp.innerHTML = Math.round(weather.main.temp - ChangeTemp).toFixed(0) + "°C";

  var weather_el = document.querySelector(".current .weather");
  weather_el.innerHTML = weather.weather[0].main;
  var weatherinfo = weather.weather[0].main;

  let hilow = document.querySelector(".hi-low");
  hilow.innerText =
    "Low and High Temp: " +
    Math.round(weather.main.temp_min - ChangeTemp) +
    " °C / " +
    Math.round(weather.main.temp_max - ChangeTemp) +
    " °C";
}

function backgroundChange(weather) {
  var imgs = document.getElementById("allbody");

  imgs.style.backgroundImage = "url(background.gif)";

  if (weatherinfo == Rain) {
    imgs.style.backgroundImage = "url(rain3.gif)";
  } else if (weatherinfo == Clouds) {
    imgs.style.backgroundImage = "url(cloud.gif)";
  } else if (weatherinfo == Clear) {
    imgs.style.backgroundImage = "url(sky3.gif)";
  } else {
    imgs.style.backgroundImage = "url(background.gif)";
  }
}

Not work function backgroundchange.

This is HTML code.

<div id='allbody' class="app" style="background-image: url(background.gif);">

<div>
    <header>
        <input type="text" autocomplete="off" class="search-box" placeholder="Please enter the location."/>

    </header>

    <main>
        <section class="location">
            <div class="city">Location, Country</div>
            <div class="date">Today date info</div>
        </section>
        <div class="current">
            <div class="temp"><span>Temp (°C)</span></div>
            <div id="wdata" class="weather">Weather</div>
            <div class="hi-low">Low and High Temp</div>
        </div>
...

How can I change background image depending on the weather?

Thank you

Is Rain, Clouds, etc... a reference to a variable you haven't included in your code? Also nothing calls backgroundChange, so i'm not sure what code you're missing. — Chase
@Chase How to re-comment? sorry I do not know about this. the Rain can Clouds from html result. So it's is not variable. then how can I do? — JET CHO

Huseyin Huseyin · Accepted Answer · 2020-06-07T02:16:19

instead of creating 'imgs' variable, better the use; document.body.style.backgroundImage = "url(background.gif)";

function backgroundChange(weather) {
  if (weatherinfo == Rain) {
  document.body.style.backgroundImage = "url(rain3.gif)";
  } else if (weatherinfo == Clouds) {
  document.body.style.backgroundImage = "url(cloud.gif)";
  } else if (weatherinfo == Clear) {
  document.body.style.backgroundImage = "url(sky3.gif)";
  } else {
  document.body.style.backgroundImage= "url(background.gif)";
  }
}

How to method to change HTML background according to API result value?

2 Answers