SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "el has no properties"

    I'm using these JavaScript functions:

    Code:
    function showHide(elementID, show)
    {
    	var el = document.getElementById(elementID);
    
    	if(show)
    	{
    		el.style.display = '';
    	}
    	else
    	{
    		el.style.display = 'none';
    	}
    
    	return false;
    }
    
    function showHideGroup(group, show)
    /*
    	Group should be an array with names of elements to hide.
    */
    {
    	for(i=0; i<group.length; i++)
    	{
    		showHide(group[i], show);
    	}
    }
    And this HTML:

    HTML Code:
    <a href="#" onClick="showHideGroup('showPayment', 1);return false;">Show Payments+</a><br />
    
    <table border="0" cellpadding="3" cellspacing="0" summary="This is a table that shows demographic data for Norman Blake.">
    	<tr>
    		<th scope="col" nowrap="nowrap" colspan="7" class="columnColorGreenUnshaded" id="showPayment[0]" style="display:none; "><h3>Payments & Adjustments</h3></th>
    	</tr>
    	<tr>
    		<th scope="col" nowrap="nowrap" colspan="3" class="columnColorGreenUnshaded" id="showPayment[1]" style="display:none;" >Sent</th>
    		<th scope="col" nowrap="nowrap" colspan="3" class="columnColorTanUnshaded" id="showPayment[2]" style="display:none;" >Received</th>
    		<th scope="col" class="columnColorBlueUnshaded" nowrap="nowrap" id="showPayment[3]" style="display:none;" >Session Balance</th>
    	</tr>
    </table>
    When I click on the link to call the functions, nothing happens and I get an error that says that the variable has no properties ("el has no properties"). What am I doing wrong?

  2. #2
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Square braces ([]) are not allowed in div ids.

    Ids must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."); no other characters are allowed.

    Try taking the braces out of the HTML and leave the JavaScript as it is.

  3. #3
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alternaive code

    Also, I notice that you haven't set up an array for the group.

    A simpler way to do this is to enclose the items in one div and show/hide using the following:

    JavaScript:
    Code:
    <script type="text/javascript" language="javascript">
    function showHide(obj){
    var el = document.getElementById(obj);
    if ( el.style.display != 'none' ) {
    el.style.display = 'none';
    }
    else {
    el.style.display = '';
    }
    }
    </script>
    HTML:
    Code:
    <a onClick="showHide('object', 1);return false;">Show Payments+</a><br />
    <div id="object">
    <table border="0" cellpadding="3" cellspacing="0" summary="This is a table that shows demographic data for Norman Blake.">
    	<tr>
    		<th scope="col" nowrap="nowrap" colspan="7" class="columnColorGreenUnshaded"><h3>Payments & Adjustments</h3></th>
    	</tr>
    	<tr>
    		<th scope="col" nowrap="nowrap" colspan="3" class="columnColorGreenUnshaded">Sent</th>
    		<th scope="col" nowrap="nowrap" colspan="3" class="columnColorTanUnshaded">Received</th>
    		<th scope="col" class="columnColorBlueUnshaded" nowrap="nowrap">Session Balance</th>
    	</tr>
    </table>
    </div>

  4. #4
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The issue with setting up a single div is that I'm trying to show/hide horizontally, using columns in a table so I'm not sure how to enclose all of that in a div. A working sample is here.

    Ideally, I want to be able to show or hide the entire "Payments & Adjustments" columns and also, the entire "Notes" column. I tried putting "Notes" in its own table within the final td and then showing/hiding that. That works (you can use the "Show Notes" link above the table to see it work), but the problem is that unless I give each row of the table a fixed height, which I hadn't wanted to do, the rows are not going to match up. (Eventually, the table content will be dynamically generated so there's no way to know which cells may wrap.) I was looking for a solution which would allow me to show/hide whichever columns I want, without having to worry about row height. I thought the showHideGroup function might work if there was a way to make each element I want to hide part of an array. Help?

  5. #5
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I think I understand.
    So the issue is to sort out the el property problem.
    I will think about this/experiment while others may come up with a solution.

  6. #6
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Rob. I appreciate any and all help.

  7. #7
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't have much time, but I think the problem is with the the array you should be creating in your original code. You need to create an array of strings in your function naming each id, like:
    Code:
    var a = new Array();
    	a[0] = "showpayment1";
    	a[1] = "showpayment2";
    Or you could just use the generic id value of "showPayment" in the function and use if i<x, where x is the number of ids you want to hide. You should be able to get that from the database.

  8. #8
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, Rob. Thanks so much.


Bookmarks

Posting Permissions

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