473,796 Members | 2,708 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

document.getEle mentById is null problem

15 New Member
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.getEle mentById("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 misunderstandin g 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
2 3922
Dormilich
8,658 Recognized Expert Moderator Expert
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
vegetable21
15 New Member
lol, i feel like such a n00b!

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

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

Similar topics

6
6847
by: David List | last post by:
I'm having a problem using different properties of the document object in the example javascripts in my textbook with browsers that identify themselves as using the Mozilla engine. One example of these problems is using document.layers. I have Google'd for examples of how to use the document object specifically with Mozilla, but I cannot find anything that explains why my problems occur. Could anyone here see through the included example...
6
46576
by: John Ramsden | last post by:
.... when the id 'junk' doesn't exist anywhere in the document, instead of returning 'object'?! I am using Javascript for a drop-down menu, slightly adapted from one by Angus Turnbull (see http://javascript.internet.com and http://gusnz.cjb.net, not that this is probably relevant but it deserves a plug ;-), on Internet Explorer v6.0.2800.1106. I need this feature of getElementById(), or an equivalent one (using sound and standard...
2
20948
by: Gary Mayor | last post by:
Hi, I'm back again. Basically i'm trying to draw a box over an image which is turning out to be a nightmare. The problem i'm getting at the moment is that i'm creating a line with <div which works when it's not hidden but I need to be able to make it hidden so I can use layers to show all when it finished drawing to make it smoother. This is how some other scripts are doing it that i've seen. So i've got it drawing a line and I need...
12
10177
by: Kepler | last post by:
How do you get the height of the client browser in IE? Both document.body.clientHeight and document.body.offsetHeight return the height of the document. If the page is long and there's a vertical scrollbar, you get the height of the entire document, screwing up any chance of centering a window in the browser using these values. Is there a way to get the height of the actual browser window and not the entire page height? Thanks.
12
3945
by: lawrence | last post by:
The following function correctly makes everything invisible but then fails to turn the one chosen DIV back to visible. I imagine I'm getting the syntax of the variable wrong? I've tried this with both single quotes and no single quotes, but it doesn't work either way. What am I doing wrong? <SCRIPT type='text/javascript'> function makeVisible(nameOfDiv) { document.getElementById('weblogs').style.visibility='hidden';
3
2449
by: InvisibleMan | last post by:
Thanks in Advance for any help on this - its truely sending my head in loops... so I appreciate your efforts! okay, I have a javascript listed below that drops down submenus contained within: <div class="small" style="display: none" id="menu1_menu"> when the heading is clicked: <a href=.. onClick="expandDiv('menu1')">
20
7013
by: weston | last post by:
I've got a piece of code where, for all the world, it looks like this fails in IE 6: hometab = document.getElementById('hometab'); but this succeeds: hometabemt = document.getElementById('hometab'); Has anyone ever seen anything like this before, or am I dreaming?
5
4441
by: HopfZ | last post by:
I made two shortcut functions for document.getElementById as: function EBI2(id){return document.getElementById(id)}; var EBI3 = document.getElementById; But EBI3 don't work. EBI2('myText'); //works EBI3('myText'); //unexpected error
29
19292
by: Nick | last post by:
I've seen a few frameworks use the following: function $(id) { return document.getElementById(id); } Then to use: $('something').innerHTML = 'blah'; I'm just trying to roll this out to my site and so far doing this has saved about 8KB of javascript (lots of ajax/dynamic elements). I just
0
9685
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9533
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10461
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9057
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6796
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5579
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4122
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3736
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2928
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.