Javascript 单击更改背景图像无效

所以我有三个按钮。我想通过单击其中一个按钮来更改横幅的背景图像。我试着用下面给你的函数来设置它。它应该采取id按钮，并改变班级横幅的背景图像。我做错了什么？如果它改变了什么，我也会使用sass

代码如下：

函数changebackground（）{
button1.addEventListener（'click'，函数（）{
document.getElementsByClassName（'banner'）.style.bacgkroundImage=“url（“../images/banner-img.png”）；
})
按钮2.addEventListener（'click'，函数（）{
document.getElementsByClassName（'banner'）.style.bacgkroundImage=“url（../images/banner-img2.png”）；
})
按钮3.addEventListener（'click'，函数（）{
document.getElementsByClassName（'banner'）.style.bacgkroundImage=“url（../images/banner-img3.png”）；
})
}

.banner{
背景图像：url（“https://via.placeholder.com/150 ");
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
高度：570px；
z指数：1；
填充顶部：50px；
位置：相对位置；
}
.横幅.旋转木马{
最高：50%；
位置：绝对位置；
}
.横幅.旋转木马.按钮{
高度：10px；
宽度：10px；
边框：2倍纯白；
利润率：10px；
边界半径：9px；
位置：相对位置；
}
.横幅.旋转木马.按钮.第一{
位置：绝对位置；
利润上限：3倍；
左边距：3倍；
高度：4px；
宽度：4px；
边界半径：5px；
背景：#fea100；
}
.banner.banner文本{
字体系列：“Playfair显示”；
字号：700；
位置：绝对位置；
颜色：#fff；
左：15%；
最高：40%；
z指数：2；
}
}

测试你最喜欢的盘子
来自豪华餐厅

函数

document.getElementsByClassName（'banner'）

返回一个数组，因此无法应用样式属性

其次，您的代码

“url（../images/banner-img.png”）”

中存在语法错误，请更改为：

“url（'../images/banner img.png'）”

要解决第一个问题，请尝试以下方法：

var banners = document.getElementsByClassName('banner');
//The following code needs to be inside the first click function, change it for the other two clicks
var  i = 0;
for(i = 0; i < banners.length; i++)
{
    banners[i].style.backgroundImage = "url('../images/banner-img.png')";
}

var banners=document.getElementsByClassName（'banner'）；
//下面的代码需要在first click函数中，在其他两次单击时对其进行更改
var i=0；
对于（i=0；i

---

最后，您必须调用

changebackground（）

使其工作

代码中有一些错误：

• 您没有调用负责附加事件处理程序的方法

  changebackground

  。如果不首先调用此方法，将永远不会执行事件处理程序

• getElementsByClassName

  返回一个数组，因此必须使用

  [0]

  访问才能获取

  div.banner

  元素
• 拼写错误

  baggroundimage

  应该是

  backgroundImage

• “url（“../images/banner-img3.png”）”

  应该是

  “url（'../images/banner-img3.png'）”

函数changebackground（）{
document.getElementById（'button1'）。addEventListener（'click'，function（）{
document.getElementsByClassName（'banner'）[0].style.backgroundImage=“url（'banner'）https://via.placeholder.com/150/0000FF/808080')";
})
按钮2.addEventListener（'click'，函数（）{
document.getElementsByClassName（'banner'）[0].style.backgroundImage=“url（'banner'）https://via.placeholder.com/150/FF0000/FFFFFF')";
})
按钮3.addEventListener（'click'，函数（）{
document.getElementsByClassName（'banner'）[0].style.backgroundImage=“url（'banner'）https://via.placeholder.com/150/FFFF00/000000')";
})
}
changebackground（）
.banner{
背景图像：url（“https://via.placeholder.com/150 ");
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
高度：270px；
z指数：1；
填充顶部：50px；
位置：相对位置；
}
.横幅.旋转木马{
最高：50%；
位置：绝对位置；
}
.横幅.旋转木马.按钮{
高度：10px；
宽度：10px；
边框：2倍纯白；
利润率：10px；
边界半径：9px；
位置：相对位置；
}
.横幅.旋转木马.按钮.第一{
位置：绝对位置；
利润上限：3倍；
左边距：3倍；
高度：4px；
宽度：4px；
边界半径：5px；
背景：#fea100；
}
.banner.banner文本{
字体系列：“Playfair显示”；
字号：700；
位置：绝对位置；
颜色：#fff；
左：15%；
最高：40%；
z指数：2；
}
}

测试你最喜欢的盘子
来自豪华餐厅
“url（../images/banner-img.png”）
在语法上不正确-在控制台中读取错误。该错误是不言自明的。您的JS中有几个印刷错误。检查“背景”和URL的拼写。返回HTMLCollection而不是元素。（来自同一页面）。我应该如何在javascript中链接它？应该怎么写？@Ludar0我在回答中更新了我的脚本，因此它使用了与您的脚本类似的图像。如果您的图像没有任何变化，请检查这些图像的url是否正确。干杯