Change of a background image of a button on onclick event

Question

Why does this not work ? In Firebug, when I click on the button, it always says to me that cambiaBandiera is not defined ...

HELP

Alex

CSS

#ITA{
float:right;
margin : 5px 85px;
width:40px;
height:40px;
background : #FFFFFF url("../ITA_off.png") center center no-repeat;
border:0;
}

---

JAVASCRIPT (in HEAD)

<style type="text/javascript">
function cambiaBandiera() {
test=document.getElementById("ITA");
test.style.backgroundImage="url('../ITA_on.png')";
}
</style>

---

and this is HTML

<div id="bandiere">
<input type="button" id="ITA" onClick="cambiaBandiera()">  </input> 
</div>

Answer 1

Use plain CSS:

#bandiere:active{
    background : #FFFFFF url("../ITA_on.png") center center no-repeat;
}

Answer 2

You are specifying input in wrongly, adding not needed </input>:

<input type="button" id="ITA" onClick="cambiaBandiera()"></input> 

It should be:

<input type="button" id="ITA" onClick="cambiaBandiera()" />

input tag is self closing, it does not need closing tag.

Answer 3

I see that you put your script between style tags instead of script tags. Maybe that is the reason it cannot find your function?