onClick attribute 'this' not working.

[The Bat]

Hello,

 

I'm not that good in JavaScript, so bare with me. In an external JS file, I have the following function:

 

function buttonDown(obj) {
   obj.style.backgroundImage = 'url(\'images/button-down.png\')';
}

 

And then I have an onClick attribute applied to a div:

 

<a onclick="buttonDown(this)"><div id="button"></a>

 

This isn't working for some reason... but when I put the function code into the onClick attribute itself, it does work. Thank you for your help!

[mainewoods]

do not quote the actual url:

function buttonDown(obj) {
   obj.style.backgroundImage = 'url(images/button-down.png)';
}

[The Bat]

Thank you, however it still does not work. But if I replace it with the following (for testing purposes):

 

function buttonDown(obj) {
   obj.style.visibility = 'hidden';
}

 

It works fine. Why is this?

[emehrkay]

your "this" refers to the link, not the div

 

in your function alert obj and see what it is

[mainewoods]

this code is not valid:

<a onclick="buttonDown(this)"><div id="button"></a>

--failure to close inner item before outer item

--block level item not allowed inside inline item

don't know what you're trying to do, but if I was you I'd lose the div and make the link a block level item using 'display:block;' in the css for that and then set that item to your desired width and height and just the use the css attribute class:hover to change the background graphic on mouseover.

[Thierry]

Wouldn't this work with the code first posted??

 

<a onclick="buttonDown('button')"><div id="button"></a>

[mainewoods]

this code is not valid:

<a onclick="buttonDown(this)"><div id="button"></a>

--failure to close inner item before outer item

--block level item not allowed inside inline item

 

--invalid code might work on some browsers but fail on others.  Browsers may be particularly sensitive to js manipulation of invalid html code.