Can't get Stripy_Tables to work

Hello Everyone,

I am new to javascript and recently purchased the book to learn. I am having trouble trying to get the examples from the book to work. I can’t seem to get Stripy Tables to work correctly. I have re-created the files from the book but still have no luck. Any help would greatly be appreciated since I am sure it is a novice mistake on my part.

Here is the stripy_tables.js file:

var StripyTables=
{
init:function()
{
var tables=Core.getElementsByClass("dataTable");
for(vari=0;i<tables.length;i++)
{
var tbodys=tables[i].getElementsByTagName("tbody");
for (var j=0;j<tbodys.length;j++)
{
var rows=tbodys[j].getElementsByTagName("tr");
for(var k=1;k<rows.length;k+=2)
{
Core.addClass(rows[k],"alt");
}
}
}
}
};
Core.start(StripyTables);

Here is my test.html file:

<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
	<title>The Running Man</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="body.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="core.js"></script>

<script type="text/javascript" src="stripy_tables.js"></script>

</head>


<body>



<table class="dataTable">
<thead>
<tr>
<th scope='col'>Web Luminary</th><th scope='col'>Height</th><th scope='col'>Hobbies</th><th scope='col'>Digs microformats</th>
</tr>
</thead>
<tbody>
<tr><td>John Allsopp</td><td class='number'>6'1"</td><td>Surf lifesaving, skateboarding, b-boying</td><td class="yesno">Yes</td></tr>
<tr><td>Tantek Celik</td><td class='number'>6'2"</td><td>Punk Rock, yoga, microformats</td><td class="yesno">No</td></tr>
<tr><td>Erik Meyer</td><td class='number'>5'10"</td><td>Collecting kitsch items, arthouse, cinema</td><td class="yesno">Yes</td></tr>
<tr><td>Maxine Sherrin</td><td class='number'>6'7"</td><td>Surf lifesaving, skateboarding, b-boying</td><td class="yesno">Yes</td></tr>
<tr><td>Jeremy Keith</td><td class='number'>5'9"</td><td>Cooking, bouzouki, male stripping</td><td class="yesno">No</td></tr>
</tbody>
</table>

</body>
</html>

AND THE CSS FILE:

tr.alt{background-color:#888888;}

If you can help, I would appreciate it.

not that I could see.

I need the core.js to see if it works for me then. Maybe I’m overlooking something.

edit - you can look here http://www.sitepoint.com/forums/showthread.php?p=3891280#post3891280 and see if you see something I’m not. Kinda tough to compare because of indenting.
You may wanna start indenting on each new comparison/loop level. Breaks your code into sections and makes it easier for you to debug.

That is excellent. I can’t say thank you enough. I was ready to pull out my hair. I appreciate your help and time to fix such a silly issue.

eesh, even with the code tags that give that code coloring (which highlighted the fact!), I missed it. Nice catch Inhicks

Whitespace is always critical around keywords …

You’ve got

for(vari=0;i<tables.length;i++) {

Now put a space where it’s needed, so the javascript can recognise the keyword ‘var’, rather than stumble on an unknown variable ‘vari’:

for(var i=0;i<tables.length;i++) {

Just checked it, and yep, that’s the only problem. :slight_smile:

hey dvidster, first welcome to SP.

Second, please wrap your code in code tags (go advanced and then the little # sign) in the future - easier to read that way!

Third if you put a javascript question into the javascript forum, you might find you get way better/more answers!

You don’t say anything at all about your core.js file. It gets loaded before your stripy_table.js
and stripy_table.js uses things that are built already in core.js. You need both for it to work right.

Thanks BLZ,
As I understood the material in the book, I have to load the core.js library first(which I download from this site) so the functions will be available for stripy_table.js to run. Is there something wrong with the syntax?