Web Analytics Made Easy - StatCounter getElementById to Class - CodingForum

Announcement

Collapse
No announcement yet.

getElementById to Class

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    getElementById to Class

    I am trying to use multiple instances of this little show/hide script for a definition list on the same page. However, the problem is that the definition list must be given an ID, and this can only be used once on a page.

    http://www.tjkdesign.com/articles/toggle_elements.asp

    How would I go about changing this to a class so that I could use it more than once on a page (i.e. multiple definition lists as opposed to one big one)?

    I changed all of the getElementById to getElementByClass and it didn't seem to work. I have very little knowledge about Javascript, so any help would be very much appreciated.

    Thanks in advance.
    Tags: None
  • #2
    document.getElementsByClass (note plural Elements) is not defined in some browsers,
    and where it is defined, it returns a node list, which is a collection of elements.

    If there was only one element of that class, the value is still a collection,
    who's first and only member is the element that was found.
    Last edited by mrhoo; Apr 12, 2009, 01:28 PM.

    Comment

    • #3
      I'm very new to Javascript, so I'm afraid I'm not very clear on what you mean. Are you suggesting that having multiple instances of definition lists with this script is not possible?

      Comment

      • #4
        Yeah I would appreciate if someone could answer this as I am having the same problem.

        Comment

        • #5
          Originally posted by Choronzon View Post
          Yeah I would appreciate if someone could answer this as I am having the same problem.
          I have the answer. I found this yesterday

          Code:
          <!doctype html public '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=utf-8">
<title>getElementsById</title>

<script type="text/javascript">

	
 function getElementsById(sId)
 {
    var outArray = new Array();	/*create array for elements*/
	if(typeof(sId)!='string' || !sId)
	{
		return outArray;
	};
	
	if(document.evaluate)
	{
		var xpathString = "//*[@id='" + sId.toString() + "']"
		var xpathResult = document.evaluate(xpathString, document, null, 0, null);
		while ((outArray[outArray.length] = xpathResult.iterateNext())) { }
		outArray.pop();
	}
	else if(document.all)
	{
		
		for(var i=0,j=document.all[sId].length;i<j;i+=1){
		outArray[i] =  document.all[sId][i];}
		
	}else if(document.getElementsByTagName)
	{
	
		var aEl = document.getElementsByTagName( '*' );	
		for(var i=0,j=aEl.length;i<j;i+=1){
		
			if(aEl[i].id == sId )
			{
				outArray.push(aEl[i]);
			};
		};	
		
	};
	
	return outArray;
 }


</script>

<style>
h1{font:4em/1.5 Georgia;}
h1 strong{color:Red;}
button{font:2em/1.5 Verdana;}
</style>

</head>
<body>

<h1>getElement<strong>s</strong>ById</h1>


	<span id="foo">[element]</span>

	<span id="foo">[element]</span>

	<span id="foo">[element]</span>

	<span id="foo">[element]</span>

	<span id="foo" class="test">[element]</span>

	<span id="foo">[element]</span>

	<span id="foo" class="test">[element]</span>

<p>
<button onclick="alert(getElementsById('foo'))">test it!</button>
</p>


</body>
</html>
          code found at hedgerwow

          Comment

          Previous template Next
          Working...
          X