Inserting data into table rows using JavaScript.

Hello, beginner/intermediate JavaScript learner here. This is my first programming language.

I am messing around with inserting data into table rows and columns. I am studying JavaScript using lynda.com.

I'm trying to set up a table with five columns. The table will show the width, height, area, and perimeter of each rectangle. I am trying to do this using an event handler function I copy and pasted from lynda.com:


if (typeof (com_joemarini) == "undefined" || !com_joemarini) var com_joemarini = {};
else if (com_joemarini && typeof(com_joemarini) != "object")
throw new Error("com_joemarini is not an Object type");

com_joemarini.EVENTS = {
NAME: "Event handling module",
VERSION: 1.0,

addEventHandler: function(oNode, sEvt, fnHandler, bCapture) {
if (typeof (oNode.attachEvent) != "undefined")
oNode.attachEvent("on" + sEvt, fnHandler);
else
oNode.addEventListener(sEvt, fnHandler, bCapture);
},

removeEventHandler: function(oNode, sEvt, fnHandler, bCapture) {
if (typeof (oNode.detachEvent) != "undefined")
oNode.detachEvent("on" + sEvt, fnHandler);
else
oNode.removeEventListener(sEvt, fnHandler, bCapture);
},

getEventTarget: function(evt) {
if (typeof(window.event.srcElement) != "undefined") return window.event.srcElement;
else return evt.target;
},

stopEvent: function(evt) {
if (typeof(window.event.cancelBubble) != "undefined") window.event.cancelBubble=true;
else evt.stopPropagation();
},

preventDefault: function(evt) {
if (typeof(window.event.returnValue) != "undefined") window.event.returnValue=false;
else evt.preventDefault();
}
}


This will be important later on.

Here is the rest of the code:


function rectangleData() {

function Rectangle(w,h) {
this.width = w;
this.height = h;
}

var myRect1 = new Rectangle(5,6);
var myRect2 = new Rectangle(7,8);
var myRect3 = new Rectangle(4,12);
var myRect4 = new Rectangle(10,3);
var myRect5 = new Rectangle(8,8);

Rectangle.prototype.width = function() {
return this.width;
}

Rectangle.prototype.height = function() {
return this.height;
}

Rectangle.prototype.area = function() {
return (this.width * this.height);
}

}
Rectangle.prototype.perimeter = function () {
return ((this.width * 2) (this.height * 2));
}
function func1()
{
document.getElementById("myRect1.shape").innerHTML="Rectangle";
document.getElementById("myRect1.width").innerHTML=myRect1.width;
document.getElementById("myRect1.height").innerHTML=myRect1.height;
document.getElementById("myRect1.area").innerHTML=myRect1.area;
document.getElementById("myRect1.perimeter").innerHTML=myRect1.perimeter;
}

function func2()
{
document.getElementById("myRect2.shape").innerHTML="Rectangle";
document.getElementById("myRect2.width").innerHTML=myRect2.width;
document.getElementById("myRect2.height").innerHTML=myRect2.height;
document.getElementById("myRect2.area").innerHTML=myRect2.area;
document.getElementById("myRect2.perimeter").innerHTML=myRect2.perimeter;
}

function func3()
{
document.getElementById("myRect3.shape").innerHTML="Rectangle";
document.getElementById("myRect3.width").innerHTML=myRect3.width;
document.getElementById("myRect3.height").innerHTML=myRect3.height;
document.getElementById("myRect3.area").innerHTML=myRect3.area;
document.getElementById("myRect3.perimeter").innerHTML=myRect3.perimeter;
}

function func4()
{
document.getElementById("myRect4.shape").innerHTML="Rectangle";
document.getElementById("myRect4.width").innerHTML=myRect4.width;
document.getElementById("myRect4.height").innerHTML=myRect4.height;
document.getElementById("myRect4.area").innerHTML=myRect4.area;
document.getElementById("myRect4.perimeter").innerHTML=myRect4.perimeter;
}
function func5()
{
document.getElementById("myRect5.shape").innerHTML="Rectangle";
document.getElementById("myRect5.width").innerHTML=myRect5.width;
document.getElementById("myRect5.height").innerHTML=myRect5.height;
document.getElementById("myRect5.area").innerHTML=myRect5.area;
document.getElementById("myRect5.perimeter").innerHTML=myRect5.perimeter;
}

}

com_joemarini.EVENTS.addEventHandler(window, "load", rectangleData,false);


I want to pass in the data into this table:

<table class="bored">
<thead>
<tr>
<th class="intro">Shape</th>
<th class="intro">Width</th>
<th class="intro">Height</th>
<th class="intro">Area</th>
<th class="intro">Perimeter</th>
</tr>
</thead>

<tbody>
<tr id="myRect1">
<td id="myRect1.shape"></td>
<td id="myRect1.width"></td>
<td id="myRect1.height"></td>
<td id="myRect1.area"></td>
<td id="myRect1.perimeter"></td>
</tr>
<tr id="myRect2">
<td id="myRect2.shape"></td>
<td id="myRect2.width"></td>
<td id="myRect2.height"></td>
<td id="myRect2.area"></td>
<td id="myRect2.perimeter"></td>
</tr>
<tr id="myRect3">
<td id="myRect3.shape"></td>
<td id="myRect3.width"></td>
<td id="myRect3.height"></td>
<td id="myRect3.area"></td>
<td id="myRect3.perimeter"></td>
</tr>
<tr id="myRect4">
<td id="myRect4.shape"></td>
<td id="myRect4.width"></td>
<td id="myRect4.height"></td>
<td id="myRect4.area"></td>
<td id="myRect4.perimeter"></td>
</tr>
<tr id="myRect5">
<td id="myRect5.shape"></td>
<td id="myRect5.width"></td>
<td id="myRect5.height"></td>
<td id="myRect5.area"></td>
<td id="myRect5.perimeter"></td>
</tr>
</tbody>
</table>



Using the code I posted I get nothing to show up except the <thead> part. I know there are probably a few different ways I can insert the data into the <tbody> using an event handler which loads the information as the page loads, but I'm lost. Any help would be great. Thank you!!!!!!