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>

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>

• javascript
• html
• css

• 1 possible duplicate of Changing background image to a button – Sarfraz Commented May 29, 2010 at 8:09
• yes it's more or less a duplicate – Alpan67 Commented May 29, 2010 at 8:10
• if its a duplicate there's no need to make another question :) just carry on discussing with ments on the answers there :) – corroded Commented May 29, 2010 at 8:14
• OK sry I did not know exactly how it works – Alpan67 Commented May 29, 2010 at 8:16
• You did not specify plete details there, see my answer below also. – Sarfraz Commented May 29, 2010 at 8:16

4 Answers 4

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>