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

Error Messages

jmitchell
P: 10
The function below is used to change the bgcolors of a tabbed navigation interface. The tab clicked by user (chosen) is changed to white and all other tabs to another color.

In FF this code returns the error "target has no properties." IE6 returns the error "Object required." Interestingly, the effect works regardless of the error in FF and the colors are changed.

Any suggestions? Thanks.

Expand|Select|Wrap|Line Numbers
  1. function changeTab(chosen)
  2. {
  3. var x;
  4.  
  5. var tabs = new Array()
  6. tabs[0] = "one"
  7. tabs[1] = "two"
  8. tabs[2] = "three"
  9. tabs[3] = "four"
  10. tabs[5] = "five"
  11. for (x in tabs)
  12. {
  13. target = document.getElementById(tabs[x]);
  14.   if (tabs[x] !== chosen)
  15.   {
  16.  
  17.  target.style.backgroundColor = '#E7F1F8';
  18.  
  19.   }
  20.   else if (tabs[x] == chosen)
  21.     {
  22.     target.style.backgroundColor = 'white';
  23.     }
  24. }
  25. }
  26.  
Jun 29 '07 #1
Share this Question
Share on Google+
11 Replies


gits
Expert Mod 5K+
P: 5,390
hi ...

probably one of your array-elements-values is an incorrect id for your tabs ... check, or post your corresponding html please ...

kind regards ...
Jun 29 '07 #2

jmitchell
P: 10
Well, I checked and I don't think so:

Expand|Select|Wrap|Line Numbers
  1. <div id="header">
  2.   <ul>
  3.     <li ><a  href="#" onClick="changeTab('one');"><span id="one">Home</span></a></li>
  4.     <li><a href="#" onClick="changeTab('two');"><span id="two">Cases</span></a></li>
  5.     <li><a  href="#" onClick="changeTab('three');"><span id="three">Students</span></a></li>
  6.     <li><a href="#" onClick="changeTab('four');"><span id="four">Other</span></a></li>
  7.     <li><a href="#" onClick="changeTab('five');"><span id="five">Stuff</span></a></li>
  8.  </ul>
  9. </div>
  10.  
Jun 29 '07 #3

gits
Expert Mod 5K+
P: 5,390
hmmm ... ok ... i combined your snippets and they work without the errors you mentioned ... so it may come from an other part of your code ... the following works without errors:

Expand|Select|Wrap|Line Numbers
  1. <script>
  2. function changeTab(chosen) {
  3.     var x;
  4.     var tabs = new Array()
  5.     tabs[0] = "one"
  6.     tabs[1] = "two"
  7.     tabs[2] = "three"
  8.     tabs[3] = "four"
  9.     tabs[5] = "five"
  10.  
  11.     for (x in tabs) {
  12.         target = document.getElementById(tabs[x]);
  13.  
  14.         if (tabs[x] !== chosen) {
  15.             target.style.backgroundColor = '#E7F1F8';
  16.         } else if (tabs[x] == chosen) {
  17.             target.style.backgroundColor = 'white';
  18.         }
  19.     }
  20. }
  21. </script>
  22.  
  23. <body>
  24.     <div id="header">
  25.         <ul>
  26.             <li><a href="#" onClick="changeTab('one');"><span id="one">Home</span></a></li>
  27.             <li><a href="#" onClick="changeTab('two');"><span id="two">Cases</span></a></li>
  28.             <li><a href="#" onClick="changeTab('three');"><span id="three">Students</span></a></li>
  29.             <li><a href="#" onClick="changeTab('four');"><span id="four">Other</span></a></li>
  30.             <li><a href="#" onClick="changeTab('five');"><span id="five">Stuff</span></a></li>
  31.         </ul>
  32.     </div>
  33. </body>
  34.  
to have a closer look we would need more of your code now ...

kind regards ...
Jun 29 '07 #4

jmitchell
P: 10
Thanks for sending me in the right direction. I've discovered that this code conflicts with prototype.js. I've changed every variable name in my script, but still can't see where the prototype problem is. How do you begin to debug something like this?

New code:

Expand|Select|Wrap|Line Numbers
  1. function changeTab(chosen)
  2. {
  3. var singleTab;
  4.  
  5. var navTabs = new Array()
  6. navTabs[0] = "tab1"
  7. navTabs[1] = "tab2"
  8. navTabs[2] = "tab3"
  9. navTabs[3] = "tab4"
  10. navTabs[5] = "tab5"
  11.  
  12. for (singleTab in navTabs)
  13. {
  14. tabTarget = document.getElementById(navTabs[singleTab]);
  15.   if (navTabs[singleTab] !== chosen)
  16.   {
  17.  
  18.  tabTarget.style.backgroundColor = "#E7F1F8";
  19.  
  20.   }
  21.   else if (navTabs[singleTab] == chosen)
  22.     {
  23.     tabTarget.style.backgroundColor = "white";
  24.  
  25.     }
  26. }
  27. }
  28.  
Jun 29 '07 #5

jmitchell
P: 10
FIXED! Appears to have been an error in the url path of the script source for prototype.js. Again, thanks for putting up with me!
Jun 30 '07 #6

jmitchell
P: 10
Spoke too soon. I'm basically stuck with if I take prototype.js out, everything works fine. I need prototype for this application, so the question is again how to debug something like this?

I'm using prototype v.1.5.0. Here is the complete html and complete js:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="cm3.css" type="text/css">
  4. <link rel="stylesheet" href="cm3_tabs.css" type="text/css">
  5. <script src="tabs_scripts.js" type="text/javascript"></script>
  6. <script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
  7. <script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
  8.  
  9.  
  10. </head>
  11. <body>
  12. <div id = "nav_container">
  13. <div id="header">
  14.  
  15.   <ul>
  16.     <li><a id = "atab1" href="#" onClick="changeTab('tab1');return false;"><span id="tab1">Home</span></a></li>
  17.     <li><a  id = "atab2"  href="#" onClick="changeTab('tab2');return false;"><span id="tab2">Cases</span></a></li>
  18.     <li><a  id = "atab3" href="#" onClick="changeTab('tab3');return false;"><span id="tab3">Students</span></a></li>
  19.     <li><a  id = "atab4" href="#" onClick="changeTab('tab4');return false;"><span id="tab4">Other</span></a></li>
  20.     <li><a   id = "atab5" href="#" onClick="changeTab('tab5');return false;"><span id="tab5">Stuff</span></a></li>
  21.  
  22.   </ul>
  23. </div>
  24. </div>
  25. <div id="content">
  26.  
  27.  
  28. Data about client cases go here, along with messages.<br>
  29. <a href="#" onClick="Effect.Grow('window1');return false;">Client, John </a>
  30.  
  31.  
  32.  
  33. <div id="window1" style="display:none;">
  34. Here is window 1<br>
  35. <a href="#" class="nav" onclick="Effect.Shrink('window1'); return false;">Close</a>
  36. </div>
  37.  
  38. <div id="window2" style="display:none;">
  39. Here is window 1<br>
  40.  
  41. <br>
  42.  
  43. </div>
  44.  
  45. <div id="window3" style="display:none;">
  46. Here is window 3<br>
  47. <a href="#" class="nav" onclick="Effect.Shrink('window3'); return false;">Close</a>
  48. </div>
  49.  
  50. </div>
  51. </body>
  52. </html>
  53.  
Expand|Select|Wrap|Line Numbers
  1. function changeTab(chosen)
  2. {
  3. var singleTab;
  4.  
  5. var navTabs = new Array()
  6. navTabs[0] = "tab1";
  7. navTabs[1] = "tab2";
  8. navTabs[2] = "tab3";
  9. navTabs[3] = "tab4";
  10. navTabs[5] = "tab5";
  11.  
  12. for (singleTab in navTabs)
  13. {
  14. tabTarget = document.getElementById(navTabs[singleTab]);
  15. refId = 'a' + navTabs[singleTab];
  16. tabHref = document.getElementById(refId);
  17.   if (navTabs[singleTab] !== chosen)
  18.   {
  19.       tabTarget.style.backgroundColor = '#E7F1F8';
  20.       refId = 'a' + navTabs[singleTab];
  21.       tabHref = document.getElementById(refId);
  22.       tabHref.style.backgroundColor = '#E7F1F8';
  23.  
  24.  
  25.   }
  26.   else if (navTabs[singleTab] == chosen)
  27.     {
  28.     tabTarget.style.backgroundColor = 'white';
  29.     refId = 'a' + navTabs[singleTab];
  30.       tabHref = document.getElementById(refId);
  31.       tabHref.style.backgroundColor = 'white';
  32.  
  33.  
  34.  
  35.     }
  36. }
  37. }
Jun 30 '07 #7

gits
Expert Mod 5K+
P: 5,390
hi ...

its difficult to say now ... when you use frameworks like that and you get errors out of them ... you may use js-console of FF/Moz or the firebug-extension for FF to get hints where the errors come from ... do you get a hint from which line the error is coming?

kind regards ...
Jun 30 '07 #8

jmitchell
P: 10
Using the FF error console and the Venkman js debugger add-on all I get is

Error: tabTarget has no properties
Source File: http://threepipeproblem.com/labs/cm/tabs_scripts.js
Line: 19

tabs_scipts.js is just the code above.
Jun 30 '07 #9

gits
Expert Mod 5K+
P: 5,390
hey ...

try to alert the singleTab-value and the tabTarget.nodeName ... may be the for i in Array is not really a good idea but you may use it and fix it with an 'typeof-undefined'-condition ... if the node is not what you expect continue the for-loop without trying to set something caoncerning the node ...

kind regards ...
Jun 30 '07 #10

jmitchell
P: 10
The answer to this is that prototype.js just doesn't like the for-in loop. I changed the loop to

var i= 0;
for(i = 0; i < tabs.length; i++)

and it worked fine.

Thanks for sticking with me on this one!
Jul 8 '07 #11

gits
Expert Mod 5K+
P: 5,390
hi ...

you may always use

Expand|Select|Wrap|Line Numbers
  1. for (var i in array) {
  2. }
when nobody extends the native js-array ... some frameworks do and its really a bad practice (this is my personal point of view ;) ) ... but if you know it you can handle it with the correct loop ...

kind regards
Jul 9 '07 #12

Post your reply

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