js背景的变化取决于天气状况(代码不起作用)

Question

条件不起作用，尽管；类别值"；里面有数据。我只是JS的新手。我的做法错了吗？如何根据天气情况改变背景？

var button = document.querySelector('.button')
var inputValue = document.querySelector('.inputValue')
var name1 = document.querySelector('.name1');
var desc = document.querySelector('.desc');
var temp = document.querySelector('.temp'); 
var category = document.querySelector('.category'); 
button.addEventListener('click',function(){
fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputValue.value+'&appid=<removed>')
.then(response => response.json()) 
// .then(data => console.log(data))
.then(data => {
var nameValue = data['name'];
var categoryValue =data['weather'][0]['main'];
var tempValue = data['main']['temp'];
var descValue = data['weather'][0]['description'];
var tofloat = Math.abs(tempValue - 273.15);
var tempCelcius= parseFloat(tofloat).toFixed(2);
name1.innerHTML = nameValue;
category.innerHTML = categoryValue;
temp.innerHTML = tempCelcius;
desc.innerHTML = descValue;
if(categoryValue == 'Clear'){
document.body.style.backgroundImage =url('../pictures/clear.jpg');
}else if(categoryValue == 'Clouds'){
document.body.style.backgroundImage =url('../pictures/clouds.jpg');
}else if(categoryValue == 'Rain'){
document.body.style.backgroundImage = url("../pictures/rain.jpg");
}
})
.catch(err => alert("Wrong City Name!"))
})

Answer 1

您忘记用qoutes:环绕url()

if(categoryValue == 'Clear'){
document.body.style.backgroundImage = "url('../pictures/clear.jpg')";
}else if(categoryValue == 'Clouds'){
document.body.style.backgroundImage = "url('../pictures/clouds.jpg')";
}else if(categoryValue == 'Rain'){
document.body.style.backgroundImage = "url('../pictures/rain.jpg')";
}

但我建议避免使用内联样式，并通过CSS将其更改为这样的样式：

var button = document.querySelector('.button')
var inputValue = document.querySelector('.inputValue')
var name1 = document.querySelector('.name1');
var desc = document.querySelector('.desc');
var temp = document.querySelector('.temp'); 
var category = document.querySelector('.category'); 
button.addEventListener('click',function(){
fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputValue.value+'&appid=' +document.getElementById("api").value)
.then(response => response.json()) 
// .then(data => console.log(data))
.then(data => {
var nameValue = data['name'];
var categoryValue =data['weather'][0]['main'];
var tempValue = data['main']['temp'];
var descValue = data['weather'][0]['description'];
var tofloat = Math.abs(tempValue - 273.15);
var tempCelcius= parseFloat(tofloat).toFixed(2);
name1.innerHTML = nameValue;
category.innerHTML = categoryValue;
temp.innerHTML = tempCelcius;
desc.innerHTML = descValue;
document.body.setAttribute("category", categoryValue);
/*
if(categoryValue == 'Clear'){
document.body.style.backgroundImage = "url('../pictures/clear.jpg')";
}else if(categoryValue == 'Clouds'){
document.body.style.backgroundImage = "url('../pictures/clouds.jpg')";
}else if(categoryValue == 'Rain'){
document.body.style.backgroundImage = "url('../pictures/rain.jpg')";
}
*/
})
.catch(err => alert("Wrong City Name!"))
})

body[category="Clear"]
{
background-image: url('../pictures/clear.jpg');
background-color: lightblue;
}
body[category="Clouds"]
{
background-image: url('../pictures/clouds.jpg');
background-color: silver;
}
body[category="Rain"]
{
background-image: url('../pictures/rain.jpg');
background-color: dimgray;
}

body[category="Clear"] .category
{
background-color: blue;
color: white;
}
body[category="Clouds"] .category
{
background-color: dimgray;
color: white;
}
body[category="Rain"] .category
{
background-color: black;
color: white;
}

<div><a href="https://openweathermap.org/api" target="_blank">API ID</a>: <input id="api"></div>
City: <input class="inputValue">
<button class="button">Submit</button>
<div class="name1"></div>
<div class="desc"></div>
<div class="temp"></div>
<div class="category"></div>

有了这种方法，你不仅可以对风格有更多的控制，而且如果有一个"未知"；类别，它将自动回落到默认样式。

Answer 2

更改主体元素背景图像时，必须将document.body.style.backgroundImage的值设置为字符串。否则，您调用的函数名为url，但该函数不存在，因此会引发错误。因此，您的条件代码是这样的：

if (categoryValue == 'Clear') {
document.body.style.backgroundImage = 'url("../pictures/clear.jpg")';
} else if(categoryValue == 'Clouds'){
document.body.style.backgroundImage = 'url("../pictures/clouds.jpg")';
} else if(categoryValue == 'Rain'){
document.body.style.backgroundImage = 'url("../pictures/rain.jpg")';
}