Javascript File Placed In Head Section of HTML But Cannot Access HTML Element

No replies
GraysonPeddie
GraysonPeddie's picture
Offline
Joined: 10/29/2006
Posts: 566

Hi, everyone. I am working in my project for COP2822 and the name of the course is Scripting for the Web.

I am trying to access my HTML element by using document.getElementById("listModules") and this is what I have for HTML:

<?xml version="1.0" encoding="UTF-8" ?><br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title></title></p> <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:100,regular' rel='stylesheet'<br /> type='text/css' /><br /> <link href="cssHomeAutomaionInterface.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="Scripts/SwitchContent.js"></script><script type="text/javascript" src="Scripts/ScrollingImagesInHeader.js"></script><script type="text/javascript" src="Scripts/XMLReaderWriter.js"></script><p></head><br /> <body></p> <!--[If !lt IE 7]><!--><!--[If !lt IE 7]><!--><div id="wrapper"> <!-- Header with a menu and scrolling images that displays tooltips when you mouse over it --><!-- Header with a menu and scrolling images that displays tooltips when you mouse over it --><div id="content"> <div id="home" class="container"> <div id="menuHome" class="submenu"> </div> <div id="contentHome" class="content"> <h1>Home Page</h1> <div id="moduleListArea"> <table id="listModules" class="data"> <caption>Lights and Devices</caption> <thead> <tr> <th style="width: 100px;">Module ID#</th> <th>Module Name</th> <th style="width: 60px;">Status</th> <th style="width: 150px">Action</th> </tr> </thead> <tbody> <tr style="color: Green;" title="Dimmer"> <th>AB.CD.EF</th> <td>2x Floor Lamp</td> <td>75%</td> <td> <a href="#">Toggle</a></p> <div style="float: right;"> <input style="width: 40px;" id="module1" value="75" /><br /> <a href="#">Set</a> </div> </td> </tr> <tr style="color: Blue;" title="Switch"> <th>AB.CD.EE</th> <td>Bedside Fan</td> <td>ON</td> <td> <a href="#">Toggle</a> </td> </tr> </tbody> </table> </div> <div id="sceneListArea" style="width: 50%; float: left;"> <table id="listScene" class="data"> <caption style="text-align: left;">Scenes</caption> <thead> <tr> <th>Scene Name</th> <th style="width: 50px">Action</th> </tr> </thead> <tbody> <tr> <td>Welcome Home</td> <td><a href="#">Toggle</a></td> </tr> <tr> <td>All Lights Off</td> <td><a href="#">Toggle</a></td> </tr> </tbody> </table> </div> <div id="modulesWithinSceneListArea"<br /> style="width: 50%; float: right;"><br /> <table id="listModulesWithinScene" class="data"> <caption style="text-align: right;">Lights and Devices Within Scene</caption> <thead> <tr> <th style="width: 100px;">Module ID#</th> <th>Scene Name</th> <th style="width: 50px">Level</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>2x Floor Lamp</td> <td>50%</td> </tr> </tbody> </table> </div> </div> </div> <div id="timers" class="container"> <div id="menuTimers" class="submenu"> <ul> <li> <span>Timer List</span><br /> <a href="javascript:SwitchTimerContent('TimerListDiv')">Timer List</a> </li> <li> <span>Add Timer</span><br /> <a href="javascript:SwitchTimerContent('AddTimerDiv')">Add Timer</a> </li> <li> <span>Setup Dusk/Dawn</span><br /> <a href="javascript:SwitchTimerContent('SetupDuskDawnDiv')">Setup Dusk/Dawn</a> </li> </ul> </div> <div id="contentTimers"> <h1 id="h1Timers">Timers Page - Timer List</h1> <div id="TimerListDiv">1</p> </div> <div id="AddTimerDiv">2 </div> <div id="SetupDuskDawnDiv">3 </div> </div> </div> <div id="admin" class="container"> <div id="menuAdmin" class="submenu""> <ul> <li> <span>Admin Page</span><br /> <a href="javascript:SwitchAdminContent('AdminPageDiv')">Admin Page</a> </li> <li> <span>Add/Delete Modules</span><br /> <a href="javascript:SwitchAdminContent('ModulesADDiv')">Add/Delete Modules</a> </li> <li> <span>Add/Delete Scenes</span><br /> <a href="javascript:SwitchAdminContent('sceneADDiv')">Add/Delete Scenes</a> </li> <li> <span>Location Setup</span><br /> <a href="javascript:SwitchAdminContent('locationSetupDiv')">Location Setup</a> </li> </ul> </div> <div id="contentAdmin" class="content"> <h1 id="h1Admin">Admin Page</h1> <div id="AdminPageDiv"> <p> <span class="label">System Status:</span><br /> <span>Working Client-Side Demo</span> </p> <p> All the functionality, such as setting up a home automation interface, will be<br /> in the server-side and will be using a database other than XML for storage,<br /> such as Microsoft SQL Server 2008 Express Edition. </p> </div> <div id="ModulesADDiv"> <fieldset><br /> <legend>Add Module</legend></p> <table class="inputData"> <tr> <th style="width: 75px;"> <label id="labelModuleIDNumber" for="inputModuleIDNumber"><br /> ID#</label></th> <td><input id="inputModuleIDNumber" style="width: 75px;" /></td> </tr> <tr> <th><label id="labelModuleName" for="inputModuleName"><br /> Name:</label></th> <td><input id="inputModuleName" /></td> </tr> <tr> <th></th> <td> <fieldset class="radioSelection"><br /> <legend>Type</legend><br /> <input type="radio" name="inputModuleType" value="Dimmer"<br /> id="inputModuleTypeDimmer" checked="checked" /><br /> <label for="inputModuleTypeDimmer">Dimmer</label><br /> <input type="radio" name="inputModuleType" value="Switch"<br /> id="inputModuleTypeSwitch" /><br /> <label for="inputModuleTypeSwitch">Switch</label><br /> </fieldset> </td> </tr> </table> <p> <input type="button" value="Add Module"<br /> style="float: right; margin-top: 1em;" /><br /> </fieldset> </div> <div id="sceneADDiv"> <p>In order to add a scene, you must first add a couple of modules.</p> </div> <div id="locationSetupDiv"> <fieldset><br /> <legend>Add Module</legend></p> <p> <a href="javascript:var load = window.open('http://stevemorse.org/jcal/latlon.php')"><br /> Get your longitude and latitude by entering your address here.</a><br /> (Get the decimal portion from geocoder.us/.ca once you enter the<br /> address.</p> <table class="inputData"> <tr> <th style="width: 75px;"> <label id="labelLongitude" for="inputModuleIDNumber"><br /> Longitude:</label></th> <td><input id="inputLongitude" /></td> </tr> <tr> <th><label id="labelLatitude" for="inputModuleName"><br /> Latitude:</label></th> <td><input id="inputLatitude" /></td> </tr> </table> <p> <input type="button" value="Submit Changes"<br /> style="float: right; margin-top: 1em;" /><br /> </fieldset> </div> </div> </div> </div> </div> <!--[endif]--><!--[endif]--><!--[If lt IE 7]> <h1>Unable To Support Internet Explorer 6</h1> <p>Hi. Please pardon my inconvenience, but as a webmaster, Grayson Peddie, I have the right not to support Internet Explorer 6 or earlier, so I encourage you to upgrade to one of the following:</p> <ul> <li><a href="http://www.microsoft.com/nz/windows/internet-explorer/default.aspx"> Internet Explorer 8 or 9 Release Candidate</a></li> <li><a href="http://www.mozilla.com/en-US/firefox/">Mozilla Firefox</a></li> <li><a href="http://www.google.com/chrome">Google Chrome</a></li> <li><a href="http://www.opera.com/">Opera</a></li> <li><a href="http://www.apple.com/safari/">Apple Safari 5</a></li> </ul> <p>For more choices of browsers, visit <a href="http://www.webdevelopersnotes.com/design/browsers_for_windows.php3">Web Developers Notes' Web Browsers Listing For Windows</a>.</p> <p>Visit <a href="http://www.ie6countdown.com/index.html">The Internet Explorer 6 Countdown</a> for more information on why I am joining the cause.</p> [endif]--><!--[If lt IE 7]> <h1>Unable To Support Internet Explorer 6</h1> <p>Hi. Please pardon my inconvenience, but as a webmaster, Grayson Peddie, I have the right not to support Internet Explorer 6 or earlier, so I encourage you to upgrade to one of the following:</p> <ul> <li><a href="http://www.microsoft.com/nz/windows/internet-explorer/default.aspx"> Internet Explorer 8 or 9 Release Candidate</a></li> <li><a href="http://www.mozilla.com/en-US/firefox/">Mozilla Firefox</a></li> <li><a href="http://www.google.com/chrome">Google Chrome</a></li> <li><a href="http://www.opera.com/">Opera</a></li> <li><a href="http://www.apple.com/safari/">Apple Safari 5</a></li> </ul> <p>For more choices of browsers, visit <a href="http://www.webdevelopersnotes.com/design/browsers_for_windows.php3">Web Developers Notes' Web Browsers Listing For Windows</a>.</p> <p>Visit <a href="http://www.ie6countdown.com/index.html">The Internet Explorer 6 Countdown</a> for more information on why I am joining the cause.</p> [endif]--><p></body><br /> </html>

Here's my Javascript file (XMLReaderWriter.js):

// Not for Internet Explorer 6 or below.<br /> var xmlDoc;<br /> var xmlObj;</p> <p>// For HTML tables (<br /> <table>)<br /> var listModules = document.getElementById("listModules").getElementsByTagName("tbody");</p> <p>// For HTML text boxes<br /> var inputLongitude = document.getElementById("inputLongitude");<br /> var inputLatitude = document.getElementById("inputLatitude");</p> <p>function LoadXML()<br /> {<br /> xmlDoc.async = "false";<br /> xmlDoc.onreadystatechange = VerifyReadyState;<br /> xmlDoc.load("Database/HomeAutomationInterface.xml");<br /> xmlObj = xmlDoc.documentElement;</p> <p> // Perform the checks and populate the tables and any other elements that are needed.<br /> if (xmlObj.tagName == "HomeAutomationInterface")<br /> {<br /> if ((xmlObj.childNodes[0].tagName == "Setup") &&<br /> (xmlObj.childNodes[0].childNodes[0].tagName == "Location"))<br /> {<br /> inputLongitude.value = xmlObj.childNodes[0].childNodes[0].getAttribute("longitude");<br /> inputLatitude.value = xmlObj.childNodes[0].childNodes[0].getAttribute("latitude");<br /> }<br /> if (xmlObj.childNodes[1].tagName == "Modules")<br /> {<br /> alert("Modules tag found.");<br /> }<br /> if (xmlObj.childNode[2].tagName == "Scenes")<br /> {<br /> alert("Scenes tag found.");<br /> }<br /> if (xmlObj.childNode[3].tagName == "Timers")<br /> {<br /> alert("Timers tag found.");<br /> }<br /> }<br /> }<br /> window.onload = function () { LoadXML(); }</p> <p>function VerifyReadyState()<br /> {<br /> // Wait until the loading of the XML file is complete.<br /> if (xmlDoc.readyState != 4) return false;<br /> }

Do note that I'm uisng client-side scripting only, so no server-side scripting is involved for my project (I'm a huge fan of ASP.net/C# but not for the project I'm working in, even PHP, which is not my cup of tea. :) It depends on how comfortable I am with working with different markup/scripting/programming languages).

When I run this code with scripting debugger enabled, I get this:

"Error: Unable to get value of the property 'getElementsByTagName': object is null or undefined"

Here's my question. Do I have to place my XML-loading/saving-related scripts at the end of the HTML file? I'm aiming for robustness, so I want to keep my HTML file organized, neat, and clean.

Here's my XML file if you're interested since I'm using this as part of my Javascript code.

<?xml version="1.0" encoding="utf-8" ?><br /> <HomeAutomationInterface><br /> <Setup><br /> <Location longitude="0" latitude="0" /><br /> </Setup><br /> <Modules></p> <p> </Modules><br /> <Scenes></p> <p> </Scenes><br /> <Timers></p> <p> </Timers><br /> </HomeAutomationInterface>

Although irrelevant to my thread, for those with curiosity and want to know why I'm writing one HTML file instead of writing different HTML files, I'm taking a "load-all-the-page-once; show-different-parts-of-webpage" approach. This is useful for navigating to different parts of the website without using up more bandwidth when placed in the server, but this could only be dependent on what sort of website you're working in.

function SwitchContent(id)<br /> {<br /> switch (id)<br /> {<br /> case "home":<br /> {<br /> document.getElementById("home").style.display = "table-row";<br /> document.getElementById("timers").style.display = "none";<br /> document.getElementById("admin").style.display = "none";<br /> }<br /> break;<br /> case "timers":<br /> {<br /> document.getElementById("home").style.display = "none";<br /> document.getElementById("timers").style.display = "table-row";<br /> document.getElementById("admin").style.display = "none";<br /> SwitchTimerContent("TimerListDiv");</p> <p> }<br /> break;<br /> case "admin":<br /> {<br /> document.getElementById("home").style.display = "none";<br /> document.getElementById("timers").style.display = "none";<br /> document.getElementById("admin").style.display = "table-row";<br /> SwitchAdminContent("AdminPageDiv");<br /> }<br /> break;<br /> default:<br /> {<br /> document.getElementById("home").style.display = "table-row";<br /> document.getElementById("timers").style.display = "none";<br /> document.getElementById("admin").style.display = "none";<br /> }<br /> break;<br /> }<br /> }</p> <p>function SwitchTimerContent(id)<br /> {<br /> switch (id)<br /> {<br /> case "TimerListDiv":<br /> {<br /> document.getElementById("TimerListDiv").style.display = "table-row";<br /> document.getElementById("AddTimerDiv").style.display = "none";<br /> document.getElementById("SetupDuskDawnDiv").style.display = "none";<br /> WriteText("h1Timers", "Timer Page");<br /> }<br /> break;<br /> case "AddTimerDiv":<br /> {<br /> document.getElementById("TimerListDiv").style.display = "none";<br /> document.getElementById("AddTimerDiv").style.display = "table-row";<br /> document.getElementById("SetupDuskDawnDiv").style.display = "none";<br /> WriteText("h1Timers", "Timer Page - Add Timer");<br /> }<br /> break;<br /> case "SetupDuskDawnDiv":<br /> {<br /> document.getElementById("TimerListDiv").style.display = "none";<br /> document.getElementById("AddTimerDiv").style.display = "none";<br /> document.getElementById("SetupDuskDawnDiv").style.display = "table-row";<br /> WriteText("h1Timers", "Timer Page - Setup Timers for Dusk and Dawn");<br /> }<br /> break;<br /> default:<br /> {<br /> document.getElementById("TimerListDiv").style.display = "table-row";<br /> document.getElementById("AddTimerDiv").style.display = "none";<br /> document.getElementById("SetupDuskDawnDiv").style.display = "none";<br /> WriteText("h1Timers", "Timer Page");<br /> }<br /> break;<br /> }<br /> }</p> <p>function SwitchAdminContent(id)<br /> {<br /> switch (id)<br /> {<br /> case "AdminPageDiv":<br /> {<br /> document.getElementById("AdminPageDiv").style.display = "table-row";<br /> document.getElementById("ModulesADDiv").style.display = "none";<br /> document.getElementById("sceneADDiv").style.display = "none";<br /> document.getElementById("locationSetupDiv").style.display = "none";<br /> WriteText("h1Admin", "Admin Page");<br /> }<br /> break;<br /> case "ModulesADDiv":<br /> {<br /> document.getElementById("AdminPageDiv").style.display = "none";<br /> document.getElementById("ModulesADDiv").style.display = "table-row";<br /> document.getElementById("sceneADDiv").style.display = "none";<br /> document.getElementById("locationSetupDiv").style.display = "none";<br /> WriteText("h1Admin", "Admin Page - Add and Remove Modules");<br /> }<br /> break;<br /> case "sceneADDiv":<br /> {<br /> document.getElementById("AdminPageDiv").style.display = "none";<br /> document.getElementById("ModulesADDiv").style.display = "none";<br /> document.getElementById("sceneADDiv").style.display = "table-row";<br /> document.getElementById("locationSetupDiv").style.display = "none";<br /> WriteText("h1Admin", "Admin Page - Add and Remove Scenes");<br /> }<br /> break;<br /> case "locationSetupDiv":<br /> {<br /> document.getElementById("AdminPageDiv").style.display = "none";<br /> document.getElementById("ModulesADDiv").style.display = "none";<br /> document.getElementById("sceneADDiv").style.display = "none";<br /> document.getElementById("locationSetupDiv").style.display = "table-row";<br /> WriteText("h1Admin", "Admin Page - Location Setup");<br /> }<br /> break;<br /> default:<br /> {<br /> document.getElementById("AdminPageDiv").style.display = "table-row";<br /> document.getElementById("ModulesADDiv").style.display = "none";<br /> document.getElementById("sceneADDiv").style.display = "none";<br /> document.getElementById("locationSetupDiv").style.display = "none";<br /> WriteText("h1Admin", "Admin Page");<br /> }<br /> break;<br /> }<br /> }</p> <p>function WriteText(id, text)<br /> {<br /> if (document.all)<br /> {<br /> document.getElementById(id).innerText = text;<br /> }<br /> else<br /> {<br /> document.getElementById(id).textContent = text;<br /> }<br /> }

In CSS, this is what I have:

/* Initialize the content of the web page. */<br /> #content #home { display: table-row; }<br /> #content #timers { display: none; }<br /> #content #admin { display: none; }<br /> #timers #TimerListDiv { display: table-row; }<br /> #timers #AddTimerDiv { display: none; }<br /> #timers #SetupDuskDawnDiv { display: none; }<br /> #admin #AdminPageDiv { display: table-row; }<br /> #admin #ModulesADDiv { display: none; }<br /> #admin #sceneADDiv { display: none; }<br /> #admin #locationSetupDiv { display: none; }

The final result looks like this, but this is only a prototype until all the tables will be populated from an XML file.

Bear in mind, though, that I could exclude this portion of my post due to the irrelevance of my whole post, but for any one of you who is curious about how my HTML code works,

HTPC: AMD Athlon X2 4050e CPU with 780G ATX motherboard running Windows 8 DP (4GB) and Ubuntu; Server: AMD AII X2 240e CPU with 880G-based ATX motherboard running Ubuntu Server 10.04 LTS (8GB)

2 pairs of Insignia NS-B2111s (front/rear), Pioneer SP-C21 Center Speaker, and 12" Velodyne Sub

Just ordered HP Pavilion dv7-6165us from QVC. Will have it by next Friday.