javascript - Style background image with JS not working - Stack Overflow

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.

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.

• javascript
• css
• getelementsbyclassname

Share Improve this question Follow asked Oct 1, 2014 at 20:06 GtOkAiGtOkAi 8711 gold badge22 silver badges77 bronze badges 3

• You are targeting the pagar element while your CSS targets the a tag. – A1rPun Commented Oct 1, 2014 at 20:08
• remove the double/single quotes in url("imagens/... – Tyr Commented Oct 1, 2014 at 20:09
• I change to: <a href="#" id="pagar" onclick="clickado()"></a> and works! thanks A1rPun – GtOkAi Commented Oct 1, 2014 at 20:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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")';
}

You can try add new style class for the event click:

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

And change the function javascript:

    function clickado() {
    document.getElementById('pagar').classList.add('click');
}

With the new api for working with classes, it is more easier

You could write a much better solution attaching a class with your javascript to the '.pagar' element, for example "clicked". Then you could add a couple of lines to your CSS:

.pagar.clicked a,
.pagar.clicked a:hover {
    background-image: url('imagens/pagar-clickado.jpg');
}

This is the javascript of course:

<script>
function clickado() {
document.getElementsByClassName('pagar')[0].className += 'clicked';
}
</script>

I learned that, to keep code simple and mantainable, moving style definition to CSS (removing it from javascript) is usually the best practice to follow.