Valid XHTML but Javascript function failing?

#1 August 8th, 2005, 01:45 PM

Hi,

I'm in the process of learning a bit of web programming, and I'm making
an effort to stay compliant with current web standards. I have a
minimal web page with divs intended to change colour when the mouse
rolls over them, but despite the fact that the page validates as XHTML,
it doesn't work in either IE6 or Firefox. Am I making an obvious
mistake?

The HTML file is as follows:

<?xml version='1.0' encoding='UTF-8'?>

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>test.com</title>
<link rel='stylesheet' href='css/index.css' type='text/css'
title='Standard' />
</head>

<body>

<script src='script/index.js' type='text/javascript'></script>

<div id='container'>
<div
id='browse'
class='inactive'
onmouseover='setAttribute("browse", "class", "active")'
onmouseout='setAttribute("browse", "class", "inactive")'[color=blue]
>Browse</div>[/color]
<div
id='search'
class='inactive'
onmouseover='setAttribute("search", "class", "active")'
onmouseout='setAttribute("search", "class", "inactive")'[color=blue]
>Search</div>[/color]
<div
id='post'
class='inactive'
onmouseover='setAttribute("post", "class", "active")'
onmouseout='setAttribute("post", "class", "inactive")'[color=blue]
>Post</div>[/color]
<div
id='members'
class='inactive'
onmouseover='setAttribute("members", "class", "active")'
onmouseout='setAttribute("members", "class", "inactive")'[color=blue]
>Log In</div>[/color]
</div>
</body>
</html>

And the associated script/index.js script is as follows:

// set the selected element's class
function setAttribute(id, attr, val) {

// get the element and set its class
document.getElementById(id).setAttribute(attr, val);
}

What's going wrong? It appears that the function setAttribute() is not
being called. I've tried embedding the function definition in the HTML
page itself but this makes no difference. Replacing the function calls
with an "alert('bob');" works perferctly, so it appears my problem lies
with the function definition/call.

Thanks in advance for any help anyone can give me!

Keith

#2 August 8th, 2005, 03:25 PM

Fixed my own problem - setAttribute() was clashing with the DOM method
of the same name. Renaming it to setAttr() solved the problem.

#3 August 8th, 2005, 03:35 PM

Crosspost and followup-to comp.lang.javascript

Keith wrote:

[color=blue]
> I'm in the process of learning a bit of web programming, and I'm making
> an effort to stay compliant with current web standards. I have a
> minimal web page with divs intended to change colour when the mouse
> rolls over them, but despite the fact that the page validates as XHTML,
> it doesn't work in either IE6 or Firefox. Am I making an obvious
> mistake?[/color]

Well, certainly writing XHTML, even valid one, does not make your like
as a scripter easier, usually it complicats things but your mistake this
time is not related to XHTML, see below.

[color=blue]
> <div
> id='browse'
> class='inactive'
> onmouseover='setAttribute("browse", "class", "active")'[/color]

The problem is that any element object has a method named setAttribute
and inside of an event handler the element itself sits at the top of the
scope chain so your call
setAttribute(...)
in the event handler is the same as
this.setAttribute(...)
while you obviously want to call your own function defined below of that
name so you would need
window.setAttribute(...)
in the event handler to make sure the global function of that name is
called.
Only as long as you want to script the element itself it is somehow
nonsense to call a function and pass in the id of the element, you can
simply use the this object and do any change, either directly in the
event handler or if needed by passing this to a function.
So instead of using that function all you need is
<div
onmouseover="this.className = 'active';"
onmouseout="this.className = 'inactive';">

[color=blue]
> function setAttribute(id, attr, val) {
>
> // get the element and set its class
> document.getElementById(id).setAttribute(attr, val);
> }[/color]

--

Martin Honnen
http://JavaScript.FAQTs.com/

#4 August 8th, 2005, 07:35 PM

Keith wrote:[color=blue]
> Hi,
>
> I'm in the process of learning a bit of web programming, and I'm making
> an effort to stay compliant with current web standards. I have a
> minimal web page with divs intended to change colour when the mouse
> rolls over them, but despite the fact that the page validates as XHTML,
> it doesn't work in either IE6 or Firefox. Am I making an obvious
> mistake?
>
> The HTML file is as follows:
>
> <?xml version='1.0' encoding='UTF-8'?>[/color]

This throws IE into quirks mode. UTF-8 is the default, so you can
delete this line.

#5 August 8th, 2005, 08:25 PM

On Mon, 8 Aug 2005, C A Upsdell and MISSINGcupsdellXXX"TERMINATOR wrote:
[color=blue][color=green]
> > <?xml version='1.0' encoding='UTF-8'?>[/color]
>
> This throws IE into quirks mode.[/color]

Yes...
[color=blue]
> UTF-8 is the default,[/color]

Speaking about an object retrieved by HTTP, that assertion is only
correct under certain conditions. For objects of type text/anything
(for example text/html, which is quite likely on-topic here), the
server's assertion about character coding takes priority - so, if that
was configured to be (let's say) iso-8859-1, then expect trouble.
[color=blue]
> so you can delete this line.[/color]

If you care about IE (though quite why one should - it's reasonably
capable of rendering standards-conforming web pages, and in the
situations where it fails, it's not the HTML author's fault), then it
would be good to avoid that line, I agree. But simply deleting it
without understanding more about the circumstances seems to me to be
over-simplistic. (Myself I'd prefer to stay with HTML/4.01 for the
moment, for any kind of content where XHTML/1.0 would be applicable).

None of this really addresses the original question, but that was
about javascript, which I avoid executing from untrusted servers
anyway - so I'm not really bothered about it - it would of course be
on-topic for another group than this one :-}

best regards

What is Bytes?

Popular Articles