CODEWITHSUNDEEP
javascripthtmlcss
Talal Khraisat
Talal Khraisat

Reputation: 45

document.getElementByClassName wont work

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

Upvotes: 0

Views: 80

Answers (2)

Dekel
Dekel

Reputation: 62566

The function is called getElementsByClassName and it returns a list of the elements that has that class.

In order to attach the event to the relevant elements you can take the first one and use:

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

Or loop over them, one by one, and attache the relevant event:

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

Upvotes: 3

spanky
spanky

Reputation: 2870

If there's only one of this class on the page, you can use querySelector instead of getElementsByClassName. This will give you the first match for the given CSS-style selector.

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

If there are more than one, use querySelectorAll with a loop.

Either way, you get better overall browser support since IE8 supports the querySelector methods but not getElementsByClassName.

Upvotes: 1

Related Questions