XHTML Transitional no onClick?

HTML & CSS
1

I just tried validating a new site I built using XHTML Transitional DTD doctype, and I got it down to just one error - which I’m thinking is something against XHTML rules. I have an instance of <a href=“javascript:void(0)” onClick=“javascript:aFunction()”>text</a>, and it says "there is no attribute “onClick”. So is using onClick and other such js functions illegal in xhtml transitional?

2

It is because XHTML elements and attributes have to be lowercase. You currently have “onClick”; try “onclick” with a lower case “c”.
( see here: http://www.w3.org/TR/xhtml1/#h-4.2 )

3

And there should be no javascript: in the attribute value, since the content of the onclick attribute is script code, not a URI. You should use the Content-Script-Type HTTP header (or a meta equivalent) to specify that the content type for inline script code is text/javascript.

<a href="javascript:void(0)" onclick="aFunction()">text</a>
4

Thanks, so like this?

<meta http-equiv="Content-Script-Type" content="text/javascript">

Also, I am getting one more error:

document type does not allow element "a" here.

At:

&#8230;ick="javascript:switchFlowers(\\'1\\')"[B][COLOR="Red"]>[/COLOR][/B]&laquo; Back - Page 1</a>';

I’m not sure what that means? Does it just mean that I should replace > with > ?

if(page == '2')
		{
			document.getElementById('row1').style.display = 'none';
			document.getElementById('row2').style.display = 'none';
			document.getElementById('row3').style.display = 'table-row';
			document.getElementById('row4').style.display = 'table-row';
			document.getElementById('flower-page-link').innerHTML = '<a href="javascript:void(0)" onclick="switchFlowers(\\'1\\')">&laquo; Back - Page 1</a>';
		}
5

That’s right.

Yes, here you’ll run into a tricky one. The problem is that the content declaration of the script element type is different in HTML and XHTML. In HTML it’s declared as CDATA, while XHTML declares it as (#PCDATA). There’s a big difference in how characters like ‘<’ and ‘&’ are handled.

Now, if you are using real XHTML this won’t be a problem. Just escape all instances of ‘<’ and ‘&’ with ‘<’ and ‘&’. If you are using pretend-XHTML (served as HTML), then you’re in a fix. You can’t do the escape thing, because that won’t work when the document is parsed as HTML – which it must be if you serve it as text/html.

The only reasonable solution would be to move the script code out to a separate file and include that, so you don’t need to have any JavaScript code in your XHTML document.

Or you could replace the .innerHTML (which may not be such a great idea with XHTML to begin with) with proper DOM functions, but that’ll get you into another problem, since for XHTML you should use document.createElementNS() etc, while HTML requires document.createElement().

6

Thanks for your help, Tommy. I think I’ll just move my JS to an external file.

7

yes onClick must be onclick. but this doesn’t work in all cases.

this bit of javascript this.className cannot be this.classname or it simply won’t function.

the way around that is to put the html tag that contains that bit of javascript into a document.write so the valiator will ignore it :slight_smile:

like this


<script type="text/javascript">
document.writeln('<a href="http:\\/\\/www.yahoo.com\\/" class="off" onmouseover="this.className=\\'on\\'" onmouseout="this.className=\\'off\\'">Yahoo<\\/a>');
</script>

here is a form you can use to make your own document.writesthat i downloaded fron about.com
http://dwight.clickthesky.com/hhelper/snippets/docwritegenerator.htm

8

You can’t use document.write() with XHTML. See Why document.write() doesn’t work in XML if you don’t know why,