Javascript 如何根据API结果值更改HTML背景？

我使用HTML、CSS、JS（不是jQuery）和OpenWeatherMapAPI创建web应用程序。 我想根据天气改变背景

但我试了很多，但都没用。js文件是一个main.js文件

这是JS代码

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

不工作功能背景改变

这是HTML代码

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

地点、国家
今日日期信息
温度（摄氏度）
天气
低温和高温
...

如何根据天气改变背景图像

---

谢谢

而不是

imgs.style.backgroundImage='url（rain3.gif）'

，试试

imgs.style.backgroundImage='url（'rain3.gif'）图像路径周围也有引号
 与其创建“imgs”变量，不如更好地使用它；
document.body.style.backgroundImage=“url（background.gif）”

雨

，

云

等等。。。对代码中未包含的变量的引用？也没有调用

backgroundChange

，所以我不确定您缺少什么代码。@Chase如何重新评论？对不起，我不知道这件事。雨水会使云层变薄。所以它不是可变的。那我怎么办？不完整，只是检查一下。如果完成，我将在这里添加。谢谢您的回答。但它不起作用。背景保持不变，搜索雨区时，背景不会改变。backgroundChange函数中未定义weatherinfo。函数backgroundChange（weather）{var weatherinfo=weather.weather[0].main；我添加了代码，但不起作用…T.T抱歉弄混了。函数backgroundChange（weather）{var weatherinfo=weather.weather[0].main；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'）”；}如果我使用PHP（而不是HTML），我也尝试删除了“”的有什么不同的吗？如果我是你，我更喜欢CSS。你可以检查这个链接；我用双引号和引号尝试了它，但仍然不起作用。

<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>
...

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