javascript - Change of a background image of a button on onclick event - Stack Overflow

admin管理员组

文章数量:1344618

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

Share Improve this question Follow edited May 29, 2010 at 8:12 erenon 19.2k22 gold badges6464 silver badges9696 bronze badges asked May 29, 2010 at 8:08 Alpan67Alpan67 10522 gold badges55 silver badges1515 bronze badges 5

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

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>

本文标签： javascriptChange of a background image of a button on onclick eventStack Overflow