On click javascript change background image

Question

Hello i have a problem with some javascript. I have a div to layout a button who does something(in my chase it will insert number 1 in to a box) and i want to change the background of the button when clicked:

<div id="nr1"><INPUT TYPE="button" NAME="one"   OnClick="this.style = 'background-image:URL(images/totalback.gif);'; Calc.Input.value += '1'" style="width:45px; height:30px; background-color:transparent;  border-style: none; border-width: 0px 0px 0px 0px"></div>

This is the code,but it ignores my background image change. Can any one help me? Short info: i have little clue about javascript.

Thank you anyway.

Answer 1

When using javascript you do it like this:

this.style.backgroundImage="url()";

Note that javascript changes the syntax a bit, instead of background-image you use backgroundImage.

Answer 2

Why dont you just use jquery its simple like this

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $('#nr1 input').on("click", function(){
         $(this).css({'background' : 'red'});
      });
   });
</script>

http://api.jquery.com/css/

Answer 3

I hope you can use something like this in css:

#your_btn_id{
    width:200px;
    height:50px;
    background-image: url('../images/inactive.png');
}

When clicked change the background image:

#your_btn_id:active{
    background-image: url('../images/active.png');
}

Hope it will work and the thing is its very simple to use.