Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2004
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts

    controlling DIVs using JS

    Basically I have a website that uses a lot of DIVs and I use radio buttons to make them appear and disappear as needed. All the navigation works fine, but whenever I use one of the buttons I get the following error message (when error messages is enabled in my browser) "document.cbTopRadioNav.rdo_prod" is null or not an object.
    The following is a basic example for part of my website. Since I am new to javascript I will just post the whole thing and maybe someone here knows how to fix the problem.

    Thanks a lot guys.

    Peter


    Code:


    <html>
    <head>
    <title>xyy</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="formate.css" rel="stylesheet" type="text/css">
    </head>
    <script language="JavaScript">
    function navModuleChange(navModuleName) {

    document.getElementById('cbamazon').style.display = 'none';
    document.getElementById('cbebay').style.display = 'none';
    document.getElementById('cbyahoo').style.display = 'none';
    document.getElementById('cbmarketwatch').style.display = 'none';
    document.getElementById('cbgoogle').style.display = 'none';
    document.getElementById('cbXYZ').style.display = 'none';
    document.getElementById(navModuleName).style.display = 'block';
    (navigator.userAgent.indexOf("5.2")>-1) ? a_modOptions = document.getElementById(navModuleName).getElementsByTagName("select") : a_modOptions=false;
    if(a_modOptions)for(i=0;i< a_modOptions.length;i++){
    a_modOptions[i].focus();
    a_modOptions[i].blur();
    }
    }

    function radioSelect(selectId) {

    var rdo = document.cbTopRadioNav.rdo_prod;
    //alert(frames[0].location);
    alert(document.URL);
    if (selectId == "cbamazon") {rdo[0].checked=true;}
    else if (selectId == "cbebay") {rdo[1].checked=true;}
    else if (selectId == "cbyahoo") {rdo[3].checked=true;}
    else if (selectId == "cbmarketwatch") {rdo[2].checked=true;}
    else if (selectId == "cbgoogle") {rdo[4].checked=true;}
    else if (selectId == "cbXYZ") {rdo[5].checked=true;}
    }
    function resetCbNav() {
    for(i=0;i<document.cbTopRadioNav.elements.length;i++){
    if(document.cbTopRadioNav.elements[i].checked)navModuleChange(document.cbTopRadioNav.elements[i].value)
    }

    }


    </script>

    <body bgcolor="#f5f5e5" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="100%" height="45" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td height="45" align="left" valign="top" bgcolor="#284386"><table width="100%" height="45" border="0" cellpadding="0" cellspacing="0">
    <tr valign="middle">
    <td width="22%" height="45" align="left" valign="top"><table width="250" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width=111 height="45" valign="top">&nbsp;</td>
    <td width=109 valign="middle"><table width="114" height="20" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="95"><strong><font color="#F5F5E5" size="2" face="Verdana, Arial, Helvetica, sans-serif">SELECT
    HERE </font></strong></td>
    <td width="12"><img src="images/global_pics/20anidot2c.gif" width="12" height="12"></td>
    </tr>
    </table></td>
    </tr>
    </table>
    <strong></strong></td>
    <td width=10% align="left" valign="middle"><table width="100" height="35" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
    <input type="radio" name="rdo_prod" value="cbamazon" onClick="navModuleChange(this.value); radioSelect(this.value);">
    amazon </font></td>
    </tr>
    <tr>
    <td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
    <input type="radio" name="rdo_prod" value="cbmarketwatch" onClick="navModuleChange(this.value); radioSelect(this.value);">
    marketwatch </font></td>
    </tr>
    </table></td>
    <td width=10% align="left" valign="middle">
    <table width="100" height="35" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
    <input type="radio" name="rdo_prod" id="radio" value="cbebay" onClick="navModuleChange(this.value); radioSelect(this.value);">
    ebay </font></td>
    </tr>
    <tr>
    <td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
    <input type="radio" name="rdo_prod" value="cbyahoo" onClick="navModuleChange(this.value); radioSelect(this.value);">
    yahoo </font></td>
    </tr>
    </table></td>
    <td width=12% align="left" valign="middle">
    <table width="115" height="35" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="115"></td>
    </tr>
    <tr>
    <td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
    <input type="radio" name="rdo_prod" id="radio1" value="cbgoogle" onClick="navModuleChange(this.value); radioSelect(this.value);">
    google</font></td>
    </tr>
    <tr>
    <td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
    <input type="radio" name="rdo_prod" value="cbXYZ" onClick="navModuleChange(this.value); radioSelect(this.value);">
    XYZ</font></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    </table> </td>
    <td width=9% align="left">&nbsp;</td>
    <td width=10% align="left">&nbsp;</td>
    <td width="27%" align="right" valign="top"><img src="images/global_pics/cloud.jpg" width="70" height="40"></td>
    </tr>
    </table></td>
    </tr>
    </table>

    <!-- amazon -->
    <div id="cbamazon" style="display:block" width=100%>amazon
    </div>
    <!-- ebay -->

    <div id="cbebay" style="display:none">
    <table width=100%>

    <tr>


    <td> ebay </td>
    </tr>
    </table>
    </div>
    <!-- marketwatch -->
    <div id=cbmarketwatch style="display:none" >
    <table width=800 align=center>
    <tr>

    <td>marketwatch</td>
    </tr>
    </table>
    </div>

    <!-- yahoo -->
    <div id=cbyahoo style="display:none;" width=100%>
    <table width=800>

    <tr>

    <td> yahoo</td>
    </tr>
    </table>


    <p>&nbsp;</p>
    </div>


    <!-- google -->
    <div id=cbgoogle style="display:none">
    <table width=800 align=center>
    <tr>
    <td width=800>
    google</td>
    </tr>
    <tr>
    <td width=100%>

    </td>
    </tr>
    </table>
    </div>
    <!-- XYZ -->
    <div id=cbXYZ style="display:none;" width=100%>
    <table width=100%>

    <tr>
    <td>
    XYZ

    </td>
    </tr>
    </table>


    <p>&nbsp;</p>
    </div>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This fixes ur code :

    <html>
    <head>
    <title>xyy</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="formate.css" rel="stylesheet" type="text/css">
    </head>
    <script language="JavaScript">
    function navModuleChange(navModuleName) {

    document.getElementById('cbamazon').style.display = 'none';
    document.getElementById('cbebay').style.display = 'none';
    document.getElementById('cbyahoo').style.display = 'none';
    document.getElementById('cbmarketwatch').style.display = 'none';
    document.getElementById('cbgoogle').style.display = 'none';
    document.getElementById('cbXYZ').style.display = 'none';
    document.getElementById(navModuleName).style.display = 'block';
    (navigator.userAgent.indexOf("5.2")>-1) ? a_modOptions = document.getElementById(navModuleName).getElementsByTagName("select") : a_modOptions=false;
    if(a_modOptions)for(i=0;i< a_modOptions.length;i++){
    a_modOptions[i].focus();
    a_modOptions[i].blur();
    }
    }

    function radioSelect(selectId) {

    var rdo = document.cbTopRadioNav.rdo_prod;
    //alert(frames[0].location);
    alert(document.URL);
    if (selectId == "cbamazon") {rdo[0].checked=true;}
    else if (selectId == "cbebay") {rdo[1].checked=true;}
    else if (selectId == "cbyahoo") {rdo[3].checked=true;}
    else if (selectId == "cbmarketwatch") {rdo[2].checked=true;}
    else if (selectId == "cbgoogle") {rdo[4].checked=true;}
    else if (selectId == "cbXYZ") {rdo[5].checked=true;}
    }
    function resetCbNav() {
    for(i=0;i<document.cbTopRadioNav.elements.length;i++){
    if(document.cbTopRadioNav.elements[i].checked)navModuleChange(document.cbTopRadioNav.elements[i].value)
    }

    }


    </script>

    <body bgcolor="#f5f5e5" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="100%" height="45" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td height="45" align="left" valign="top" bgcolor="#284386"><table width="100%" height="45" border="0" cellpadding="0" cellspacing="0">
    <tr valign="middle">
    <td width="22%" height="45" align="left" valign="top"><table width="250" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width=111 height="45" valign="top"> </td>
    <td width=109 valign="middle"><table width="114" height="20" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="95"><strong><font color="#F5F5E5" size="2" face="Verdana, Arial, Helvetica, sans-serif">SELECT
    HERE </font></strong></td>
    <td width="12"><img src="images/global_pics/20anidot2c.gif" width="12" height="12"></td>
    </tr>
    </table></td>
    </tr>
    </table>
    <strong></strong></td>
    <td width=10% align="left" valign="middle"><table width="100" height="35" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
    <form name=cbTopRadioNav>
    <input type="radio" name="rdo_prod" value="cbamazon" onClick="navModuleChange(this.value); radioSelect(this.value);">
    amazon </font></td>
    </tr>
    <tr>
    <td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
    <input type="radio" name="rdo_prod" value="cbmarketwatch" onClick="navModuleChange(this.value); radioSelect(this.value);">
    marketwatch </font></td>
    </tr>
    </table></td>

    <td width=10% align="left" valign="middle">
    <table width="100" height="35" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
    <input type="radio" name="rdo_prod" id="radio" value="cbebay" onClick="navModuleChange(this.value); radioSelect(this.value);">
    ebay </font></td>
    </tr>
    <tr>
    <td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
    <input type="radio" name="rdo_prod" value="cbyahoo" onClick="navModuleChange(this.value); radioSelect(this.value);">
    yahoo </font></td>
    </tr>
    </table></td>
    <td width=12% align="left" valign="middle">
    <table width="115" height="35" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="115"></td>
    </tr>
    <tr>
    <td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
    <input type="radio" name="rdo_prod" id="radio1" value="cbgoogle" onClick="navModuleChange(this.value); radioSelect(this.value);">
    google</font></td>
    </tr>
    <tr>
    <td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
    <input type="radio" name="rdo_prod" value="cbXYZ" onClick="navModuleChange(this.value); radioSelect(this.value);">
    XYZ</font></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    </table> </td>
    <td width=9% align="left"> </td>
    <td width=10% align="left"> </td>
    <td width="27%" align="right" valign="top"><img src="images/global_pics/cloud.jpg" width="70" height="40"></td>
    </tr>
    </table></td>
    </tr>
    </form>
    </table>

    <!-- amazon -->
    <div id="cbamazon" style="display:block" width=100%>amazon
    </div>
    <!-- ebay -->

    <div id="cbebay" style="display:none">
    <table width=100%>

    <tr>


    <td> ebay </td>
    </tr>
    </table>
    </div>
    <!-- marketwatch -->
    <div id=cbmarketwatch style="display:none" >
    <table width=800 align=center>
    <tr>

    <td>marketwatch</td>
    </tr>
    </table>
    </div>

    <!-- yahoo -->
    <div id=cbyahoo style="display:none;" width=100%>
    <table width=800>

    <tr>

    <td> yahoo</td>
    </tr>
    </table>


    <p> </p>
    </div>


    <!-- google -->
    <div id=cbgoogle style="display:none">
    <table width=800 align=center>
    <tr>
    <td width=800>
    google</td>
    </tr>
    <tr>
    <td width=100%>

    </td>
    </tr>
    </table>
    </div>
    <!-- XYZ -->
    <div id=cbXYZ style="display:none;" width=100%>
    <table width=100%>

    <tr>
    <td>
    XYZ

    </td>
    </tr>
    </table>


    <p> </p>
    </div>
    </body>
    </html>


    the thing u did wrong is that u were refering to a FORM: document.cbTopRadioNav

    but you never had a form with the name of cbTopRadioNav so thats all i added

  • #3
    New Coder
    Join Date
    Mar 2004
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts

    THANKS A LOT

    this saves me tons of time...

  • #4
    New Coder
    Join Date
    Mar 2004
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts

    one more thing

    what does this do

    alert(document.URL);

    I get an alert with the URL of my page I am viewing. However it desn't work if I take this line out

    ??

  • #5
    New Coder
    Join Date
    Mar 2004
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ok all resolved... was looking at the wrong error

    thanks again


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •