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 4 of 4
  1. #1
    New Coder
    Join Date
    May 2003
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question changing display property of a class of objects

    Hi Folks,

    I could use a hand changing the display property of a group of objects based on classname. What I have here doesn't work; perhaps you can see why? I think the basic problem is that I don't know how to access the objects properly...

    Code:
    <script Language="JavaScript">
    <!--
    function View(className) {
    	// alert ('Viewing: ' + className);
    	eval('.edit_' + className + '.style.display = "none";');
    	eval('.view_' + className + '.style.display = "";');
    }
    
    function Edit(className) {
    	// alert ('Editing: ' + className);
    	eval('.view_' + className + '.style.display = "none";');
    	eval('.edit_' + className + '.style.display = "";');
    }
    // -->
    </script>
    
    <table>
    	<tr>
    		<td colspan="2"><u><b><font face="Verdana" size="2" color="#000080">Club Member</font></b></u> &nbsp;
    		<span class="edit_clubmember"><a href="javascript:View('club_member')">view</a></span>
    		<span class="view_clubmember"><a href="javascript:Edit('club_member')">edit</a></span></td>
    	</tr>
    	<tr>
    		<td align="right"><font face="Verdana" size="2" color="#000080">First Name:</font></td>
    		<td>
    			<span class="view_club_member"><b><font face="Verdana" size="2" color="#000080">%%fname_html%%</font></b></span>
    			<span class="edit_club_member"><input type="text" name="fname" value="%%fname_form%%" size="20"></span>
    		</td>
    	</tr>
    	<tr>
    		<td align="right"><font face="Verdana" size="2" color="#000080">Last Name:</font></td>
    		<td>
    			<span class="view_club_member"><b><font face="Verdana" size="2" color="#000080">%%lname_html%%</font></b></span>
    			<span class="edit_club_member"><input type="text" name="lname" value="%%lname_form%%" size="20"></span>
    		</td>
    	</tr>
    </table>
    Any thoughts, suggestions are appreciated.

  • #2
    New Coder
    Join Date
    Aug 2006
    Posts
    66
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Well, I'm not sure exactly what you were intending with your original code. But you could do this:

    Code:
    // grabs an array of all elements on the page
    var allElements = document.getElementsByTagName('*'); 
    // cycles through each element
    for(var i=0; i < allElements.length; i++)
    { 
         // assigns element to currentElement variable
         var currentElement = allElements[i]; 
         // finds the className of the currentElement
         var currentElementClass = currentElement.getAttribute('className');
         // replace the CAPITALIZED text with your trigger class name 
         if(currentElementClass=="WHATEVER YOU'RE LOOKING FOR")
         {
               // Hides Span if Condition is met
               currentElement.style.display="none"; 
         }
         else
         {
               // Shows Span if Condition is not met
               currentElement.style.display="inline"; 
         }
    }

  • #3
    New Coder
    Join Date
    May 2003
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks rugged.

    The idea behind the code is simply to show either the current value as plain HTML OR a form text input. The effect should be cool. The user clicks "edit" then all the editable fields transform into form inputs in the same position.

    I guess I was assuming that the properties of all objects in a named class could be changed simultaneously rather than looping over individual objects. You're solution looks promising though. I'll have to try it out.

    Take care.

  • #4
    New Coder
    Join Date
    May 2003
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Here's what I came up with. Figured I'd post it for the benefit of others.

    Code:
    <html><head>
    
    <script Language="JavaScript" type="text/javascript">
    <!--
    var allElements = new Array(1);
    function Initialize() {
    	allElements = document.getElementsByTagName('*');
    }
    
    function ShowHide(show_classname, hide_classname) {
    	for(var i=0; i < allElements.length; i++) {
    		var currentElement = allElements[i];
    		var currentElementClass = currentElement.className;
    
    		if(currentElementClass == show_classname) {
    			currentElement.style.display="inline";
    		} else if (currentElementClass == hide_classname) {
    			currentElement.style.display="none";
    		}
    	}
    
    }
    // -->
    </script>
    </head>
    
    <body onLoad="Initialize()">
    
    <table border="0">
    	<tr>
    		<td colspan="2"><u><b><font face="Verdana" size="2" color="#000080">Club Member</font></b></u> &nbsp;
    		<span class="edit_club_member" style="display:none"><a href="javascript:ShowHide('view_club_member', 'edit_club_member')">view</a></span>
    		<span class="view_club_member"><a href="javascript:ShowHide('edit_club_member', 'view_club_member')">edit</a></span></td>
    	</tr>
    	<tr height="30">
    		<td align="right"><font face="Verdana" size="2" color="#000080">First Name:</font></td>
    		<td>
    			<span class="view_club_member"><b><font face="Verdana" size="2" color="#000080">%%fname_html%%</font></b></span>
    			<span class="edit_club_member" style="display:none"><input type="text" name="fname" value="%%fname_form%%" size="20"></span>
    		</td>
    	</tr>
    	<tr height="30">
    		<td align="right"><font face="Verdana" size="2" color="#000080">Last Name:</font></td>
    		<td>
    			<span class="view_club_member"><b><font face="Verdana" size="2" color="#000080">%%lname_html%%</font></b></span>
    			<span class="edit_club_member" style="display:none"><input type="text" name="lname" value="%%lname_form%%" size="20"></span>
    		</td>
    	</tr>
    </table>
    
    </body>
    Quite a cool effect IMHO


  •  

    Posting Permissions

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