javascript - document.getElementsByClassName 不起作用

Question

我在 JavaScript 中将按钮样式从 id 更改为 class样式显然显示在按钮上，但它不起作用。(是的，我确实检查了 stackoverflow 和网络的解决方案这是代码:

var currImage = 0;
window.onload = () => {
    const factsArr = [
    { image:'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif', source:"<a href='http://news.nationalgeographic.com/news/2010/03/100315-half-male-half-female-chickens/' style='text-decoration:none;color:#FFFFFF;' target='_blank'>know more</a>"},
    { image:'https://media.giphy.com/media/3ohhwJax6g4Y8BK30k/giphy.gif', source:"<a href='https://broadly.vice.com/en_us/article/mbqjap/witches-allegedly-stole-penises-and-kept-them-as-pets-in-the-middle-ages'style='text-decoration:none;color:#FFFFFF;'target='_blank'>know more</a>"},
  { image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif',      source:"<a href='http://www.guinnessworldrecords.com/world-records/most-expensive-pizza' style='text-decoration:none;color:#FFFFFF;'target='_blank'>know more</a>"},
    ];

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

.generate-btn{
height:16%;
margin:auto;
background-color: #8a2be2;
color:white;
font-family: 'Open Sans',sans-serif;
font-size:24px;
display: inline-block;
padding:32px 16px;
border-radius: 2%;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
text-align: center;
cursor: pointer;
position: absolute;
left: 40%;
top: 100%;
width: 20%;
}
@media screen and (width: 600px) {
    .generate-btn{
        width:100%;
        height:auto;
        font-size:100%;
    }
}

<button class="generate-btn">Amazing Fact Button</button>
<div id="source"></div>
<img id="image" />

Answer 1

这个函数叫做getElementsByClassName并返回具有该类的元素列表。

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

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

或者循环遍历它们，一个接一个，并附上相关事件:

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