Change of a background image of a button on onclick event

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;
m开发者_C百科argin : 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>

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

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.

Use plain CSS:

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

JS is a standard language, so there's no need for specifying the type.

Also, it's a script not a style as well so:

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