dom scripting using javascript

I'm two months in to learning dom scripting and I'm stuck. I created objects to hold solar system planet data and put each object into an array like:

var description ={name:"Description",
distance:"Distance from the Sun (km)\n(Semimajor axis of orbit)",
mer:"Mean Equatorial Radious (km)",
volume:"Volume (km<sup>3</sup>)",
mass:"Mass (kg)",
density:"(kg)",
esg:"Equatorial Surface Gravity (m/s<sup>2</sup>)",
escVelocity:"Escape Velocity (l,/h)",
rotation:"Rotation Period (Earth Days)",
orbit:"Orbit Period (Earth Years)",
mov:"Mean Orbit Velocity (km/h)",
orbitEcc:"Orbit Eccentricity",
orbitInc:"Orbit Inclination to Ecliptic",
incOfEquator:"Inclination of Equator to Orbit",
surfaceTemp:"Minimum/Maximum\nSurface Temperature",
mac:"Major Atomspheric Constituents",
moons:"Moons",
rings:"Rings"};

var mercury ={name:"Mercury",
distance:57909227,
mer:"2,439.7\n(0.3829 x Earth)",
volume:"6.08272 x 10<sup>10</sup>\n(0.056 x Earth&apos;s)",
mass:"3.3010 x 10<sup>23</sup>",
density:5.427,
esg:3.7,
escVelocity:15300,
rotation:58.646,
orbit:0.2408467,
mov: 170503,
orbitEcc:0.20563593,
orbitInc:"7.0&#176;",
incOfEquator:0,
surfaceTemp:"-173/427",
mac:" ",
moons:0,
rings:false};

solarSystem[0] = description;
solarSystem[1] = mercury;
solarSystem[2] = venus;
solarSystem[3] = earth;
solarSystem[4] = mars;
solarSystem[5] = jupiter;
solarSystem[6] = saturn;
solarSystem[7] = uranus;
solarSystem[8] = neptune;

Next I created some script to generate markup like so:


<body>

<div id="datadiv"></div>

<script type="text/javascript">
window.onload = function(){
//build table - column headers
var tableelement = document.createElement("table");
var trelement = document.createElement("tr");
tableelement.appendChild(trelement);

for(var i in solarSystem){//an array indexed by numbers
var thelement = document.createElement("th");
trelement.appendChild(thelement);

var nodecontent = document.createTextNode(solarSystem[i].name);
thelement.appendChild(nodecontent);
}

//build table rows
for(var key in solarSystem[0]){//an object with properties
var trelement = document.createElement("tr");
tableelement.appendChild(trelement);
for(var iii in solarSystem){
var tdelement = document.createElement("td");
trelement.appendChild(tdelement);
if(key !== "name"){
var nodecontent = document.createTextNode(solarSystem[iii].key);// <<<<<<<<< THE OFFENDING LINE *********
tdelement.appendChild(nodecontent);
}
}
}

//append table to datadiv
var datadivelement = document.getElementById("datadiv");
datadivelement.appendChild(tableelement);

mybreakpoint += 1;
}


</script>
<script type="text/javascript" src="scripts/solarSystem.js" ></script>
</body>

This creates a beautiful table, headers are correct, with subsequent rows of data where each cell is filled with 'undefined'! The offending line is marked above. I can see via firebug that the 'key' reflects the value I expect, ie, name, distance, mer, volume etc., but!, each time the nodecontent of the offending line contains 'undefined'. Can someone see what I'm doing incorrectly?
Thanks all.

dom scripting using javascript

using for in var as object property

nyteshade

Fotiman

nyteshade

Fotiman

nyteshade

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week