Document.GetElementsByClassName не будет работать [дублировать] ⇐ Html

[Anonymous]

Я изменил стиль кнопки с ID на класс в JavaScript.

Стиль, по-видимому, отображается на кнопке, но он не функционирует.
(да, я проверил Stackoverflow и веб-сайт для решений) < /p>
Вот код: < /p>

Код: Выделить всё

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

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);
}< /code>
.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%;
}
}< /code>
Amazing Fact Button

Подробнее здесь: https://stackoverflow.com/questions/460 ... -wont-work