473,395 Members | 1,972 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

Valid XHTML but Javascript function failing?

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")'
Browse</div> <div
id='search'
class='inactive'
onmouseover='setAttribute("search", "class", "active")'
onmouseout='setAttribute("search", "class", "inactive")'Search</div> <div
id='post'
class='inactive'
onmouseover='setAttribute("post", "class", "active")'
onmouseout='setAttribute("post", "class", "inactive")'Post</div> <div
id='members'
class='inactive'
onmouseover='setAttribute("members", "class", "active")'
onmouseout='setAttribute("members", "class", "inactive")'Log In</div>

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

Aug 8 '05 #1
4 2188
Fixed my own problem - setAttribute() was clashing with the DOM method
of the same name. Renaming it to setAttr() solved the problem.

Aug 8 '05 #2
Crosspost and followup-to comp.lang.javascript

Keith wrote:

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?
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.

<div
id='browse'
class='inactive'
onmouseover='setAttribute("browse", "class", "active")'
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';">

function setAttribute(id, attr, val) {

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

--

Martin Honnen
http://JavaScript.FAQTs.com/
Aug 8 '05 #3
Keith wrote:
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'?>


This throws IE into quirks mode. UTF-8 is the default, so you can
delete this line.
Aug 8 '05 #4
On Mon, 8 Aug 2005, C A Upsdell and MISSINGcupsdellXXX"TERMINATOR wrote:
<?xml version='1.0' encoding='UTF-8'?>
This throws IE into quirks mode.


Yes...
UTF-8 is the default,
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.
so you can delete this line.


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
Aug 8 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: piraticman | last post by:
Hi. I have some code for a javascript jump menu... It validated with HTML 4.0 but now does not validate with XHTML strict 1.0. I have used name atributes in my code which aparantly are not...
10
by: Rob Fentress | last post by:
I am trying to develop very standards-compliant content using XHTML and CSS. I am using CSS positioning and thus need to only include my stylesheet on browsers I have tested to make sure they...
7
by: Simon Strandgaard | last post by:
There are no <iframe> tag in xhtml strict, instead I should use <object>. If I change <iframe> to <object> then my javascript stops working. I am curious to how to use <object> with javascript...
0
by: Robert Oschler | last post by:
I am using XMLHttpRequest() from Javascript on the client side. XMLHttpRequest() expects a valid XML/XHTML document as a response. The target for the request is a PHP4 script running on my web...
7
by: Jean Pierre Daviau | last post by:
Hi, <script language="javascript" type="text/javascript"> if(navigator.appName.indexOf("Netscape") != -1){ document.writeln('<link rel="stylesheet" href="~styles/aquarelle_ns.css"...
8
by: Anthony Williams | last post by:
Morning all, I'm having a wee problem with a project I'm working on at the moment. I'm leading my company into producing a website, based upon Web Standards, which will be created using XHTML...
12
by: Alex D. | last post by:
How can I stop asp.net from rendering XHTML istead of HTML? My javascripts are rendering wrong because of that. It is rendering &amp; to clients instead of &. Any help? Thanks, Alejandro.
8
by: Alan Silver | last post by:
Hello, I thought that ASP.NET 2.0 was supposed to output valid XHTML 1.0. I've just spent a very frustrating time trying to fix all the validation errors in framework-produced code. I posted...
3
by: Exal de Jesus Garcia Carrillo | last post by:
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1 Hey, I trying to write a page in valid XHTML 1.0 strict, I have a javascript function and call him by this way: <a href="http://foo.com"...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.