By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,747 Members | 1,672 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,747 IT Pros & Developers. It's quick & easy.

document.getElementById is null problem

P: 15
Hi,

I'm relatively new to JavaScript, but not to programming.

I'm trying to get a table to expand and collapse within a cell of my master table. However i want to collapse all the other open tables when i expand a new one. I'm nearly there but i get an error that i can't seem to shake.

Firefox show me the error as the following:

Error: document.getElementById("more" + i) is null
Source File: http://www.fleethenest.com/nl/adamscott/index.php
Line: 21

If i remove the call to collapse_all(); then it executes with no errors and as expected, but obviously doesn't collapse all! I can't understand why my getElementById works sometimes but not in the collapse_all();

Am i misunderstanding a fundamental part of JS?

THanks for your help, here's my page:


Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript">
  7.     var expanded = false;
  8.     var num_stocks = 5;
  9.     function show_more(i) {
  10.         collapse_all();
  11.         document.getElementById("more"+i).innerHTML = '<a href="javascript:show_less(\''+i+'\')">-</a><table width="100%" border="1" cellspacing="2" cellpadding="2"><tr><td>Metric \\ Time</td><td>2008</td><td>2007</td></tr><tr><td>AA</td><td>4.8</td><td>4.3</td></tr><tr><td>AB</td><td>116</td><td>101</td></tr></table>';
  12.     }
  13.     function show_less(i) {
  14.         document.getElementById("more"+i).innerHTML = '<a href="javascript:show_more(\''+i+'\')">+</a>';
  15.     }
  16.     function settings(setting, value) {
  17.         if (setting == "expanded") expanded = value;
  18.     }
  19.     function collapse_all() {
  20.         for (var i=0; i <= num_stocks; i++) { 
  21.             document.getElementById("more"+i).innerHTML = '<a href="javascript:show_more(\''+i+'\')">+</a>';
  22.         }
  23.     }
  24. </script>
  25. </head>
  26. <body>
  27. <div id="message">Message: </div>
  28. <table width="1000px" border="0" cellspacing="0" cellpadding="0">
  29.   <tr>
  30.     <td width="700px" valign="top"><table width="100%" border="1" cellspacing="2" cellpadding="2">
  31.  
  32.     <tr>
  33.         <td><strong>Symbol</strong></td>
  34.         <td><strong>Name</strong></td>
  35.         <td><strong>Last Price</strong></td>
  36.     </tr>
  37.     <tr>
  38.         <td>AAL.L</td>
  39.  
  40.         <td>ANGLO AMERICAN<br /><div id="more0"><a href="javascript:show_more('0')">+</a></div></td>
  41.         <td>1288</td>
  42.     </tr>
  43.     <tr>
  44.         <td>ABF.L</td>
  45.         <td>ASSOCIAT BRIT FOODS<br /><div id="more1"><a href="javascript:show_more('1')">+</a></div></td>
  46.  
  47.         <td>664.5</td>
  48.     </tr>
  49.     <tr>
  50.         <td>AMEC.L</td>
  51.         <td>AMEC<br /><div id="more2"><a href="javascript:show_more('2')">+</a></div></td>
  52.         <td>577</td>
  53.  
  54.     </tr>
  55.     <tr>
  56.         <td>AML.L</td>
  57.         <td>AMLIN<br /><div id="more3"><a href="javascript:show_more('3')">+</a></div></td>
  58.         <td>376</td>
  59.     </tr>
  60.     <tr>
  61.  
  62.         <td>ANTO.L</td>
  63.         <td>ANTOFAGASTA<br /><div id="more4"><a href="javascript:show_more('4')">+</a></div></td>
  64.         <td>470</td>
  65.     </tr>
  66. </table></td>
  67.     <td width="300px" valign="top">
  68.       <table width="100%" border="1" cellspacing="2" cellpadding="2">
  69.         <tr>
  70.           <td colspan="2">Settings</td>
  71.         </tr>
  72.  
  73.         <tr>
  74.           <td width="10px"><input type="checkbox" onchange="javascript:settings('expanded',this.checked)" id="settings_expanded" checked="checked"/></td>
  75.           <td>Show Multiple Expanded Stocks.</td>
  76.         </tr>
  77.       </table>    </td>
  78.   </tr>
  79.   <tr>
  80.     <td colspan="700px" valign="top">&nbsp;</td>
  81.  
  82.     <td valign="top">&nbsp;</td>
  83.   </tr>
  84. </table>
  85. </body>
  86. </html>
  87.  
Feb 15 '09 #1
Share this Question
Share on Google+
2 Replies


Dormilich
Expert Mod 5K+
P: 8,639
if num_stocks is the total of elements, then you should loop not more than num_stocks times (i.e. in your case your looping once too much):
Expand|Select|Wrap|Line Numbers
  1. for (var i=0; i<num_stocks; i++) {...}
Feb 15 '09 #2

P: 15
lol, i feel like such a n00b!

Many thanks for pointing that out!
Feb 16 '09 #3

Post your reply

Sign in to post your reply or Sign up for a free account.