document.getElementByClassName wont work

1 like 0 dislike
124 views
asked Sep 2 by GaneshChowdary (350 points)
edited Sep 2 by PramUkesh

I changed a button style from id to class in JavaScript the style apparently is displaying on the button but it isn't functioning. (yes i did check stackoverflow and the web for solutions here is the code:

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" />

 

Please log in or register to answer this question.

Welcome to Askmewiki Q&A, where you can ask questions and receive answers from other members of the community.

2 questions

0 answers

0 comments

12 users

Latest Activity:

02/09/2017 12:54:am

Most active Members
this month:
    Gute Mathe-Fragen - Bestes Mathe-Forum
    ...