Buonasera ragazzi,
ho un problema e non riesco a capire dove sbaglio.
Sto facendo degli esempi per imparare JS, ma arrivati a questo punto mi sorge il dubbio che forse è meglio che vada a zappare la terra .

Vi metto i codici che ho creato, sono molto banali :

1 : pagina.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>basi di Ajax : css</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="csstest.js" />
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<table id="table">

<tr>
<th id="tablehead">Prodotto</th>

</tr>


<tr>
<td id="tablefirstline"> Aereo</td>

</tr>
<tr>
<td id="tablesecondline">Automobile</td>

</tr>

</table>



<input type="button" value="Imposta Style 1" onclick="setStyle1();" />
<input type="button" value="Imposta Style 2" onclick="setStyle2();" />
</body>
</html>



2 : script.js

function setStyle1()
{
otable = document.getElementById("table");
otablehead=document.getElementById("tablehead");
otablefirst = document.getElementById("tablefirstline");
otablesecond = document.getElementById("tablesecondline");

//imposto gli stili per la mia tabella;

otable.className="table1";
otablehead.className="tablehead1";
otablefirst.className="tablecontent1";
otablesecond.className="tablecontent1";

}


function setStyle2()
{
otable = document.getElementById("table");
otablehead=document.getElementById("tablehead");
otablefirst = document.getElementById("tablefirstline");
otablesecond = document.getElementById("tablesecondline");

otable.className="table2";
otablehead.className="tablehead2";
otablefirst.className="tablecontent2";
otablesecond.className="tablecontent2";
}

Queste due funzioni non fanno altro che modificare il css della mia pagina.
Il problema è che , sia aprendo la pagina con IE o Firefox, mi da pagina bianca.Non ci sono errori , ma non visualizzo proprio un bel niente.
Come mai?
Grazie in anticipo per eventuali risposte.
A presto.
E.