Building a Table in JS and it Wil Not Display

Discussion in 'JavaScript' started by pcinfoman, Nov 24, 2013.

0
  1. #1
    I am trying to create a table in JavaScript that contains a list of degrees, radians, sin, cos, and tan.

    I have the math right, but I am having trouble with the creating the table.

    It is not displaying. I know it is something simple, but I am missing it.

    Ideas?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Computer Science 553 Lab Pages: Lab 3: Trig Functions On The Fly</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Table of Sines, Cosines, and Tangents</h1>
<h2>Charles P. Scott  |  9092</h2>
<hr>

<script type="taxt/javaScript">
// Setting Up Variables
var myTable       =   document.createElement("table");
var tRowH       =   document.createElement('tr');
var tCellH_Radians   =   document.createElement('th');
var tCellH_Degrees   =   document.createElement('th');
var tCellH_SinX     =   document.createElement('th');
var tCellH_CosX     =   document.createElement('th');
var tCellH_TanX     =   document.createElement('th');
var angleR       =   0;
var angleD       =   0;

// Building the Table
document.appendChild(myTable); // <table>

// Creating the Header Row
myTable.appendChild(tRowH); // <th>

// Building the Cells in the Header Row
tRowH.appendChild(tCellH_Radians);
tRowH.appendChild(tCellH_Degrees);
tRowH.appendChild(tCellH_SinX);
tRowH.appendChild(tCellH_CosX);
tRowH.appendChild(tCellH_TanX);

// Populate the Cells in the Header Row
tCellH_Radians.appendChild(document.createTextNode('Radians'));
tCellH_Degrees.appendChild(document.createTextNode('Degrees'));
tCellH_SinX.appendChild(document.createTextNode('sin(x)'));
tCellH_CosX.appendChild(document.createTextNode('cos(x)'));
tCellH_TanX.appendChild(document.createTextNode('tan(x)'));

for ( var i = 0; i < 25; i++ ) { // Loop to Build the Interior Table Cells

// Setting Up Variables
   var tRowC       =   document.createElement('tr');
   var tCell_Radians   =   document.createElement('td');
   var tCell_Degrees   =   document.createElement('td');
   var angleRImg     =   document.createElement('img');
     angleRImg.setAttribute('src', 'images/img' + angleD + '.gif');
   var tCell_SinX     =   document.createElement('td');
   var result_SinX     =   Math.round(Math.sin(angleR)*100000)/100000;
   var tCell_CosX     =   document.createElement('td');
   var result_CosX     =   Math.round(Math.cos(angleR)*100000)/100000;
   var tCell_TanX     =   document.createElement('td');

   // Building the Loop Row
   myTable.appendChild(tRowC); // <tr>
   if ((i+1)%2==0){
     tRowC.setAttribute('class','alt'); // Sets up the Alternate Row Color
   }
   
// Building the Table Cells
   tRowC.appendChild(tCell_Radians);
   tRowC.appendChild(tCell_Degrees);
   tRowC.appendChild(tCell_SinX);
   tRowC.appendChild(tCell_CosX);
   tRowC.appendChild(tCell_TanX);

// Populating the Cells
   tCell_Radians.appendChild(angleRImg);
   tCell_Degrees.appendChild(document.createTextNode(angleD + "°"));
   tCell_SinX.appendChild(document.createTextNode(result_SinX));
   tCell_CosX.appendChild(document.createTextNode(resultCosX));
     if ((angleD === 90) || (angleD === 270)){ // Setting Angles 90 and 270 to "Undefined"
       var resultTanX = "Undefined";
     }
     else {
       var resultTanX = Math.round(Math.tan(angleR)*100000)/100000;
     }
   tCell_TanX.appendChild(document.createTextNode(resultTanX));

// Incrementing the Angles
   angleR += Math.PI/12; // The Same as 15 Degrees
   angleD += 15;
}
</script>

<br /><br />
<a href="javascript:history.go(-1)">[ Go Back ]</a>
</body></html>
    Code (markup):

     
    pcinfoman, Nov 24, 2013 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    And again... WHY? Just build the damn table in HTML, and if need be, populate it with js. And seriously - you add a class to show alternating rows? Take a look at CSS.
    Hint:
    
tr:nth-child(even) {
background: #ccc;
}
tr:nth-child(odd) {
background: #fff;
}
    Code (markup):
    And again, creating HTML-elements from scratch in javascript is not the way to do it. Create the HTML with HTML, and manipulate it with javascript.
     
    PoPSiCLe, Nov 24, 2013 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Besides - you have two errors, which you would have seen had you been using a proper debugger, like FireBug for Firefox.
    First of: it's "text/javascript" not "taxt/Javascript"
    and second, you have a wrong variable, resultCosX instead of result_CosX
     
    PoPSiCLe, Nov 24, 2013 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,824
    Likes Received:
    4,539
    Best Answers:
    123
    Trophy Points:
    665
    #4
    Here's your answer 
    <title>Computer Science 553 Lab Pages: Lab 3: Trig Functions On The Fly</title>
    Code (markup):
     
    sarahk, Nov 24, 2013 IP
  5. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #5
    That's not an answer to "why" - if the curriculum is bogus, then tell the teacher to get his head out of his ass. That they teach this approach in what I assume is a uni course is just appalling.
     
    PoPSiCLe, Nov 25, 2013 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    I can actually understand WHY -- since these elements would only work when scripting is enabled, they have no malfing business in the markup (though a nice NOSCRIPT tag would!).

    The problem I'm seeing is you're appending the table to document instead of document.body... tables can't go as a child of document and be shown. Change this:

    document.appendChild(myTable);

    to this:

    document.body.appendchild(myTable);

    ... and it should work. though putting it all in an anonymous function (so it's not polluting the global namespace), passing document as a variable 'd' to it (reducing the total code), and adding some functions to make/generate the code more consistently could really help manage things. Also, you only need to say VAR once, you don't need to waste time on setAttribute if you made the element yourself,... likewise what makes your name/tagline the start of a new subsection of the h1 (if anything it's part of that header), much less the change in topic (hr) when you aren't changing the topic...

    Oh, and your script won't run as type="taxt/javascript" -- do you see a problem there? It's text, not taxt.... and technically 90 and 270 degrees are infinite, not undefined... might be a good idea to show text of the radians as the ALT for those images... and since you can use nth-child instead of that 'alt' class, there's no reason to maintain 'i' as a counter.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="viewport"
	content="width=device-width; initial-scale=1.0"
/>

<title>
	Computer Science 553 Lab Pages: Lab 3: Trig Functions On The Fly
</title>

<style type="text/css" media="screen, projection, tv">
table {
	border-collapse:collapse;
}


thead th {
	padding:0.2em 0.5em;
	color:#FFF;
	background:#666;
}

tbody td {
	text-align:right;
	padding:0.1em 0.5em;
	background:#F0F0F0;
}

tbody td:first-child,
tbody td:nth-child(2) {
	text-align:center;
}

tbody tr:nth-child(even) td {
	background:#F8F8F8;
}
</style>


</head><body>

<h1>
	Table of Sines, Cosines, and Tangents<br />
	<small>Rewrite, Jason M. Knight</small>
</h1>

<div>
	<!--
		lip service DIV since inline-level elements like <A>nchors can't be
		direct children of BODY!
	-->
	<a href="javascript:history.go(-1)">[ Go Back ]</a>
</div>

<script type="text/javaScript"><!--

(function(d){

	function make(tag, parent, content) {
		var e = d.createElement(tag);
		if (content) e.appendChild(
			(typeof content === 'string') ?
			d.createTextNode(content) :
			content
		);
		if (parent) parent.appendChild(e);
		return e;
	}

	function makeRowOf(tag, parent, content) {
		var tr = make('tr', parent, false);
		for (var t = 0; t < content.length; t++) make(tag, tr, content[t]);
		return tr;
	}

	var myTable = make('table', d.body);

	makeRowOf(
		'th',
		make('thead', myTable), 
		[ 'Radians', 'Degrees', 'sin(x)', 'cos(x)', 'tan(x)' ]
	);

	var
		angleR = 0,
		angleD = 0,
		angleRInc = Math.PI / 12, // faster to pre-calc than inside loop!
		tBody = make('tbody', myTable);

	do {
	
		var img = d.createElement('img');
		img.src = 'images/img' + angleD + '.gif';
		img.alt = angleR.toFixed(5) + ' rad';
		
		makeRowOf('td', tBody, [
			img,
			angleD + '\xB0',
			Math.sin(angleR).toFixed(5),
			Math.cos(angleR).toFixed(5),
			(
				angleD === 90 || angleD == 270 ?
				'\u221E\xA0\xA0\xA0\xA0\xA0' :
				Math.tan(angleR).toFixed(5)
			)
		]);

		angleR += angleRInc; // The Same as 15 Degrees
		angleD += 15;

	} while (angleD <= 360);

})(document);

--></script>

<noscript>
	<p>
		<strong>ERROR</strong> - This page requires javascript to function.
	</p>
</noscript>

</body></html>
    Code (markup):
    Is how I'd tackle that. Functions to simplify row creation, a few less 'var' declarations, and fixing up some of the math/presentation like making it actually show 'infinity' for 90/270.
     
    deathshadow, Nov 26, 2013 IP