Valid XHTML but Javascript function failing?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View


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

The HTML file is as follows:

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

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    " ">

<html xmlns=' ' xml:lang='en' lang='en'>
        <link rel='stylesheet' href='css/index.css' type='text/css'
title='Standard' />


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

        <div id='container'>
                onmouseover='setAttribute("browse", "class", "active")'
                onmouseout='setAttribute("browse", "class", "inactive")'
                onmouseover='setAttribute("search", "class", "active")'
                onmouseout='setAttribute("search", "class", "inactive")'
                onmouseover='setAttribute("post", "class", "active")'
                onmouseout='setAttribute("post", "class", "inactive")'
                onmouseover='setAttribute("members", "class", "active")'
                onmouseout='setAttribute("members", "class", "inactive")'
            >Log In</div>

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!


Re: Valid XHTML but Javascript function failing?

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

Re: Valid XHTML but Javascript function failing?

Keith wrote:
Quoted text here. Click to load it

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

Re: Valid XHTML but Javascript function failing?

On Mon, 8 Aug 2005, C A Upsdell and MISSINGcupsdellXXX"TERMINATOR wrote:

Quoted text here. Click to load it


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.

Quoted text here. Click to load it

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

Re: Valid XHTML but Javascript function failing?

Crosspost and followup-to comp.lang.javascript

Keith wrote:

Quoted text here. Click to load it

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.

Quoted text here. Click to load it

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
in the event handler is the same as
while you obviously want to call your own function defined below of that
name so you would need
in the event handler to make sure the global function of that name is
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
     onmouseover="this.className = 'active';"
     onmouseout="this.className = 'inactive';">

Quoted text here. Click to load it


    Martin Honnen /

Site Timeline