CODEWITHSUNDEEP
javascripthtmlcss
Alpan67
Alpan67

Reputation: 105

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;
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>

Upvotes: 0

Views: 11536

Answers (4)

helmans
helmans

Reputation: 1

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>

Upvotes: 0

erenon
erenon

Reputation: 19118

Use plain CSS:

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

Upvotes: 0

Peter Tillemans
Peter Tillemans

Reputation: 35341

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

Upvotes: 8

Sarfraz
Sarfraz

Reputation: 382696

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.

Upvotes: 1

Related Questions