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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Showing and Hiding DIV's generated dynamically

    Ok, I am very new to JS, but I have had a fair bit of experience in PHP, ASP, .NET (<- bah), pearl and a few others so I know coding concepts

    Here is my problem: I have an external JS file that I am loading an array from (places[]). I have a form on the page that creates checkboxes from the array as follows:

    Code:
     <tr><td>
          Place(s) :
          </td><td>
          <script language=Javascript>
            <!--
            //<![CDATA[
    			for(var i=0; i<=places.length-1; i++) {
    				document.write("<input type=\"checkbox\" name=\""+places[i]+"\" onClick=\"HideUnhide("+places[i]+"Div)\">"+places[i]+"</input>");
    			}
    			//]]>
    			//-->
    		</script>
    		</td></tr>
    The onClick handler that I have put in there is where the problem starts. It is MEANT to display various DIV tags that I have made invlisible like so:

    Code:
    <div id='BankstownDiv' style="display: none;">
            <h2>Bankstown Lecturer</h2>
             Same As Unit Coordinator:
                <input   type="checkbox" name="Bankstown" id="Bankstown" />
                  Name : <br />
                  <input   type="text" name="CLName" /><br />
    			 Location - <br />
                Room Number : <br />
                <input   type="text" name="CLRoom" /> <br />
                Building :<br />
                <input   type="text" name="CLBuilding" /><br />
    </div>
    etc.....
    And this is the Javascript function that I have placed in the HEAD of the doco:

    Code:
    	function HideUnhide(objectID) 
    	{
    	  if(document.getElementByID(objectID).style.display == 'none' ) {
    	    document.getElementById(objectID).style.display = 'block';
    	  }
    	  else{
    	    document.getElementById(objectID).style.display = 'none';
    	  }
    	}
    Now when I test it in IE6 I get an error "Object doesn't support this property or method" and it points me to the following line of code:

    Code:
    	function HideUnhide(objectID) 
    	{
    	  [B][U]if(document.getElementByID(objectID).style.display == 'none' )[U][B] {
    	    document.getElementById(objectID).style.display = 'block';
    	  }
    	  else{
    	    document.getElementById(objectID).style.display = 'none';
    	  }
    	}
    As far as I was aware, the DIV element (which I am referring to, for example, the value for place[2]="Bankstown" and I simply refer to its DIV tag --which is called BankstownDiv -- by stating place[2]+"Div") DOES have a style.display method...at least that what some JS tutes have indicated, and I can get the DIV's initially hidden using the style="display:none;" attribute but I simple can not work out why this script wont run successfully.

    Any help would be GREATLY appreciated!!

    Thanks in advance fellas!

    -cptn_spoon

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    ...DOES have a style.display method...
    ... the div MUST have set a display CSS, otherwise the if statement woun't work (there is no default values for style.attributes in javascript). More than that, the CSS should be placed in tag as style, not as a class or id, because the method style,attribute will search for a style attribute value, not for an id or a class CSS embeded or external)
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    May 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Im not sure I follow what you mean Kor, is it possible for you to point out the problem in the code I supplied?

    Thanks for the reply regardless!

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    try:
    Code:
    for(var i=0; i<places.length; i++) {
        document.write('<input type="checkbox" name="'+places[i]+'" onclick="HideUnhide(\''+places[i]+'Div\')" />'+places[i]);
    }
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    New to the CF scene
    Join Date
    May 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Worked like a charm. Thanks glenn

    I see my mistake now!

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    ... I was to send the same code line... but... bizzare, it woun't work
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts

    Question



    My test failed... I don't see why... glenngv?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <script>
    function bla(){
    places='Bla';
    param = places+'Div';
    document.write('<input type="checkbox" name="'+places+'" onClick="hideUnhide(\''+param+'\')">'+places+'</input>');
    alert(document.body.innerHTML)
    }
    function hideUnhide(a){
    alert(a)
    }
    window.onload=bla
    </script>
    </head>
    
    <body>
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You are doing a document.write statement after the document has loaded, causing the current document to be replaced by a new document.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    aha... I don't use document.write at all (I preffere document.getElementById(id).innerText and document.getElementById(id).innerHTML ) so I am not used with it.

    Thank you for replay
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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