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

Answer 1

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)";
  }
}