Javascript document.getElementByClassName不起作用

我在JavaScript中将按钮样式从id更改为类 该样式显然显示在按钮上，但不起作用。 （是的，我确实检查了stackoverflow和web的解决方案 代码如下：

var currImage=0；
window.onload=（）=>{
常数事实=[
{图像：'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif，来源：“}，
{图像：'https://media.giphy.com/media/3ohhwJax6g4Y8BK30k/giphy.gif，来源：“}，
{图像：'https://media.giphy.com/media/1nkUav308CBws/giphy.gif，来源：“}，
];
常数swtch=（）=>{
document.getElementById（'image'）.setAttribute（'src'，factsArr[currImage].image）；
document.getElementById（'source'）。innerHTML=factsArr[currImage]。source；
currImage++；
if（currImage==factsArr.length）
currImage=0；
console.log（currImage）；
};
document.getElementByClassName（'generate-btn'）。addEventListener（'click'，swtch）；
document.getElementById（'source'）。addEventListener（'click'，swtch）；
}

。生成btn{
身高：16%；
保证金：自动；
背景色：#8a2be2；
颜色：白色；
字体系列：“开放式Sans”，无衬线；
字体大小：24px；
显示：内联块；
填充：32px 16px；
边界半径：2%；
盒影：0 12像素16像素0 rgba（0,0,0,0.24），0 17像素50像素0 rgba（0,0,0,0.19）；
文本对齐：居中；
光标：指针；
位置：绝对位置；
左：40%；
最高：100%；
宽度：20%；
}
@媒体屏幕和屏幕（宽度：600px）{
.生成btn{
宽度：100%；
高度：自动；
字体大小：100%；
}
}

惊人事实按钮

调用该函数并返回具有该类的元素列表

为了将事件附加到相关元素，您可以选择第一个元素并使用：

document.getElementsByClassName('generate-btn')[0].addEventListener('click', swtch);

或者一个接一个地在其上循环，并附加相关事件：

elements = document.getElementsByClassName('generate-btn');
Array.prototype.forEach.call(elements, function(el) {
    el.addEventListener('click', swtch);
});

函数被调用，并返回具有该类的元素列表

为了将事件附加到相关元素，您可以选择第一个元素并使用：

document.getElementsByClassName('generate-btn')[0].addEventListener('click', swtch);

或者一个接一个地在其上循环，并附加相关事件：

elements = document.getElementsByClassName('generate-btn');
Array.prototype.forEach.call(elements, function(el) {
    el.addEventListener('click', swtch);
});

---

如果页面上只有一个此类，则可以使用

querySelector

而不是

getElementsByClassName

。这将为给定CSS样式选择器提供第一个匹配项

document.querySelector('.generate-btn').addEventListener('click', swtch);

如果有多个，请在循环中使用

querySelectorAll

---

无论哪种方式，您都可以获得更好的整体浏览器支持，因为IE8支持

querySelector

方法，但不支持

getElementsByClassName

如果页面上只有一个此类，您可以使用

querySelector

而不是

getElementsByClassName

。这将为您提供给定CSS的第一个匹配项-样式选择器

document.querySelector('.generate-btn').addEventListener('click', swtch);

如果有多个，请在循环中使用

querySelectorAll

---

无论哪种方式，您都可以获得更好的整体浏览器支持，因为IE8支持

querySelector

方法，但不支持

getElementsByClassName

它是

Elements

复数。