JavaScript XHTML Validation help!

I use a random image script at the top of my forums but cannot seem to get it to validate properly as "XHTML 1.0 Transitional".

http://validator.w3.org/check?uri=ht...doctype=Inline

Here is what I have in my template header (to randomly select header):

<script type="text/javascript">
var logo=new Array()
logo[0]='<img src="$stylevar[imgdir_misc]/logo1.gif" border="0" alt="$vboptions[bbtitle]" />'
logo[1]='<img src="$stylevar[imgdir_misc]/logo2.gif" border="0" alt="$vboptions[bbtitle]" />'
logo[2]='<img src="$stylevar[imgdir_misc]/logo3.gif" border="0" alt="$vboptions[bbtitle]" />'
logo[3]='<img src="$stylevar[imgdir_misc]/logo4.gif" border="0" alt="$vboptions[bbtitle]" />'
logo[4]='<img src="$stylevar[imgdir_misc]/logo5.gif" border="0" alt="$vboptions[bbtitle]" />'
logo[5]='<img src="$stylevar[imgdir_misc]/logo6.gif" border="0" alt="$vboptions[bbtitle]" />'
logo[6]='<img src="$stylevar[imgdir_misc]/logo7.gif" border="0" alt="$vboptions[bbtitle]" />'
var displaylogo=Math.floor(Math.random()*(logo.length) )
document.write(logo[displaylogo])
</script>

and here is what it outputs once it is sent to the browser:

<!-- heres where code was -->
<script type="text/javascript">
var logo=new Array()
logo[0]='<img src="http://www.chaosforums.com/images_black/misc/logo1.gif" border="0" alt="Chaos Forums" />'
logo[1]='<img src="http://www.chaosforums.com/images_black/misc/logo2.gif" border="0" alt="Chaos Forums" />'
logo[2]='<img src="http://www.chaosforums.com/images_black/misc/logo3.gif" border="0" alt="Chaos Forums" />'
logo[3]='<img src="http://www.chaosforums.com/images_black/misc/logo4.gif" border="0" alt="Chaos Forums" />'
logo[4]='<img src="http://www.chaosforums.com/images_black/misc/logo5.gif" border="0" alt="Chaos Forums" />'
logo[5]='<img src="http://www.chaosforums.com/images_black/misc/logo6.gif" border="0" alt="Chaos Forums" />'
logo[6]='<img src="http://www.chaosforums.com/images_black/misc/logo7.gif" border="0" alt="Chaos Forums" />'
var displaylogo=Math.floor(Math.random()*(logo.length) )
document.write(logo[displaylogo])
</script>

Do you see anything right off that I could change that could help me validate this script as XHTML 1.0 Trans?

Hello Josh,

try to comment out your javascript code:

HTML Code:

<script type="text/javascript">
<!--
[code goes here]
//-->
</script>

Perfect! That worked like a dream!

I tried it with

<!--
-->

but it caused the code to not be parsed, why would

<!--
//-->

Work instead? Mainly out of curiosity.

Thank you so much for that info, now it validates perfectly!

the comments are not the true fix.

The error occurs because your script is inside of an anchor. THAT is what is not valid.

Code:

<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
	<td align="left"><a href="http://www.chaosforums.com/">
<script type="text/javascript">
<!--
var logo=new Array()
logo[0]='<img src="http://www.chaosforums.com/images_black/misc/logo1.gif" border="0" alt="Chaos Forums" />'
logo[1]='<img src="http://www.chaosforums.com/images_black/misc/logo2.gif" border="0" alt="Chaos Forums" />'
logo[2]='<img src="http://www.chaosforums.com/images_black/misc/logo3.gif" border="0" alt="Chaos Forums" />'
logo[3]='<img src="http://www.chaosforums.com/images_black/misc/logo4.gif" border="0" alt="Chaos Forums" />'
logo[4]='<img src="http://www.chaosforums.com/images_black/misc/logo5.gif" border="0" alt="Chaos Forums" />'
logo[5]='<img src="http://www.chaosforums.com/images_black/misc/logo6.gif" border="0" alt="Chaos Forums" />'
logo[6]='<img src="http://www.chaosforums.com/images_black/misc/logo7.gif" border="0" alt="Chaos Forums" />'
var displaylogo=Math.floor(Math.random()*(logo.length))
document.write(logo[displaylogo])
//-->
</script>
</a></td>
	<td align="right">
		&nbsp;
	</td>
</tr>
</table>

You should really move the link stuff to the actual doc.write element.
as in,

Code:

logo[6]='<a href="blah.html"><img src="http://www.chaosforums.com/images_black/misc/logo7.gif" border="0" alt="Chaos Forums" /></a>'

So if the image is within the <a href="/"></a> tags in the script it will be valid?

correct.

basically how you have it up there, is that you are "linking a script" which is invalid.

a script CAN, however, sit in a table cell.

so,

table
tr
td
script....
doc.write '<a href=""><img /></a>';
/script
/td
/tr
/table

is valid.


table
tr
td
a href=""
script....
doc.write '<img />';
/script
/a
/td
/tr
/table

is NOT.

the above opinions are not wrong but...

it's not recommended to embed javascript into your html code especially within the <body> ... the proper fix would be to save all javascript externally

agreed.

to be quit honest, i wouldn't even use javascript for this... this should be done server-side, and plain html linked image returned.

Originally Posted by briansol

agreed.

to be quit honest, i wouldn't even use javascript for this... this should be done server-side, and plain html linked image returned.

is this possible through the vBulletin templates?

probably...

i am not very familiar with the template engine... i'm sure it can be done.

basically you'd end up with an echo $somevar at the end of your rotator function..

and then you can place that var in the navbar template or where ever.

So can vB templates run php scripts?

You can add a new plugin using the hook parse_templates and do this:

PHP Code:

$random_number = rand(1, 2);

$random_banner[1] = '<a href="index.php"><img src="img1.jpg" alt="" border="0" /></a>';
$random_banner[2] = '<a href="index.php"><img src="img2.jpg" alt="" border="0" /></a>'; 


And where you want the banner to show, place this in your template:

HTML Code:

$random_banner[$random_number]

In the plugin, you can add as many $random_banner[x] as you want and change rand(1, 2) to rand(1, x), x=the number of random banners.

This is exactly what I was looking for. Thank you for writing out that script too! I didn’t realize this was available in the template system.