Style background image with JS not working

javascript css getelementsbyclassname
GtOkAi picture GtOkAi · Oct 1, 2014 · Viewed 11.3k times · Source

Ok, maybe its a stupid question with a little bug, but I'm trying fix this and I can not:

    <style>
 .pagar a {   
 width:  200px;
 height: 85px;
 display: block; 
 background-image: url('imagens/pagar.jpg'); 
 background-repeat: no-repeat;

     } 
.pagar a:hover { 
 background-image: url('imagens/pagar-hover.jpg');
 background-repeat: no-repeat; } 
</style>

    <script>
    function clickado() {
    document.getElementsByClassName('pagar')[0].style.backgroundImage = 'url("imagens/pagar-clickado.jpg")';
    }
    </script>

HTML:

<div class="pagar" id="pagar" ><a href="#" onclick="clickado()"></a></div>

The problem:

The .style.backgroundImage just does not change to "imagens/pagar-clickado.jpg", the the path is correct, I do not get error in console and ('pagar')[0] is also correct too.

Answer

A1rPun picture A1rPun · Oct 1, 2014

I think you wanted to target the a element inside the div.pagar. You can do something like this:

HTML

<div class="pagar" ><a href="#" id="pagar" onclick="clickado()"></a></div>

Javascript

function clickado() {
    document.getElementById('pagar').style.backgroundImage = 'url("imagens/pagar-clickado.jpg")';
}

Related questions

getElementsByClassName to change the style of elements when event occurs

I'm trying to use onmouseover="document.getElementsByClassName().style.background='color'" to change the color of all divs with a given classname to another color when hovering over another page element. Here is a jsfiddle -if anyone could give a few …

Read More
getElementsByClassName doesn't work, but getElementById does?

I've written a script, it's goal is to stop displaying images one and two, while allowing image 3 to remain displayed and move into their place. It works fine when I use div Id's instead of div Classes, but I would …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More