Replacing getElementById

[Xmonster]

I don't know if replacement is necessary, but anyway. Basically, I have a code (see below) which sets up a variable as the Id of a specified element. My problem is, I need the variable to be whatever the user clicks on, rather than a set element, as there will be four of these clickable elements on the page. I'm assuming I'll have to remove getElementById and replace it, possibly with some kind of array code, but I'm not sure how to go about that. Any ideas?

<script type="text/javascript">
	window.onload = function () 
	{
	var bob = document.getElementById('test2');
	if (bob) 
		{
		bob.className = 'unactive';
		bob.firstChild.onclick = function() 
			{
			if(this.parentNode.className == 'unactive') {
			this.parentNode.className = 'active';
			} 
			else 
				{
				this.parentNode.className = 'unactive';
				}
			}
		}
	};
</script>

[reflect]

I'm not sure I have followed you here but i'd do it a little more like this....

<script>
function changeCcls(id)
{
	var cls = document.getElementById(id).className;
	if(cls == 'unactive'){
		document.getElementById(id).className= 'active';
	}else{
		document.getElementById(id).className= 'unactive';
	}
}

</script>
<style>
.active{color:red;}
.unactive{color:blue;}
</style>
<div id='1' class='unactive' onmouseover='changeCcls("1")' onmouseout='changeCcls("1")'>123</div>
<div id='2' class='unactive' onmouseover='changeCcls("2")' onmouseout='changeCcls("2")'>123</div>
<div id='3' class='unactive' onmouseover='changeCcls("3")' onmouseout='changeCcls("3")'>123</div>

But yes you could just use an array and run through that see if it has the id you want to accept then run the code... all up to you really.

I hope that helps.

edit//

I should have mentioned if you just want this as a class change you could do it with css only.

<style>
div{padding:10px}
div:hover{color:white; background-color:#444;}
</style>
<div>123</div>
<div>123</div>
<div>123</div>

just add a class and change div to .classname and saves lots of lines.

[Xmonster]

I should have explained that better; I'm not trying to change the look of the div, I'm trying to change its size. I'm also trying to get it to work when the div is clicked, not when its moused over. The css for that would, as you pointed out, be absurdly simple.

The problem is that I want the script to apply to multiple div elements, and it is currently only able to work for one, because of getElementById. I don't know what to replace that with.

EDIT: what do you mean by change div to .classname? Where would that change be implemented?

[hdewantara]

I think you have to have those elements having something in common, e.g. having same class name equals to "test2":

PHP Code:

<div class="test2">
  <div>Bob</div>
  ...
</div>
<div class="test2">
  <div>Jane</div>
  ...
</div> 


And your new script may look like the following (untested):

PHP Code:

<script type="text/javascript">
    window.onload = function (){
        var bobs = document.getElementsByTagName('div');
        if (bobs.length > 0){
            for (var i=0; i<bobs.length; i++){
                if (bobs[i].className == 'test2'){
                    // ... install click handlers and/or classname manipulations here.
                }
            }
        }
    };
</script> 


[Logic Ali]

It's easy to do this but it's not advisable to use .firstChild.

Can you show an example of your markup?

[Xmonster]

The entire code looks like this;

<style type="text/css">
body {
background-image:url(images/background-grid.jpg);
background-repeat:repeat-y,-x;
}
#test {
background-color :white;
color : #FFF;
height : 20px;
overflow : hidden;
width : 240px;
border-top-right-radius:10px;
border-top-left-radius:10px;
box-shadow: 2px 2px 2px 2px #888888;
-moz-transition:1.5s;
}
#test.unactive {
height : 20px !important;
overflow : hidden !important;
}
#test.active {
height :120;
margin-left:50px;
margin-top:50px;
border-radius:10px;
}
#test.active #tabtop {
background-color:#00054C;
border-top-right-radius:10px;
border-top-left-radius:10px;
color:#ECC223;
}
#tabtop {
background-color:#359ABC;
height:20px;
border-top-right-radius:10px;
border-top-left-radius:10px;
}
#tabtop:hover {
background-color:#00054C;
border-top-right-radius:10px;
border-top-left-radius:10px;
color:#ECC223;
}
#test h2 {
cursor : pointer;
font : bold 9pt/20px sans-serif;
height : 20px;
margin : 0;
margin-left:20px;
padding : 0 10px;
}
#test p {
margin-top:2px;
margin-bottom:0;
margin-left:5px;
font:10px arial, sans-serif;
color:#205C71;
vertical-align:top;
text-align:left;
}
ul {
list-style:none;
float:left;
margin-right:5px;
margin:0;
vertical-align:top;
margin-left:-10px;
margin-top:7px;
}
li {
text-align:left;
font:12px arial, sans-serif;
color:#359ABC;
margin-top:3px;
}


#test2 {
background-color :white;
color : #FFF;
height : 20px;
overflow : hidden;
width : 240px;
border-top-right-radius:10px;
border-top-left-radius:10px;
box-shadow: 2px 2px 2px 2px #888888;
-moz-transition:1.5s;
}
#test2.unactive {
height : 20px !important;
overflow : hidden !important;
}
#test2.active {
height :120;
margin-left:50px;
margin-top:50px;
border-radius:10px;
}
#test2.active #tabtop {
background-color:#00054C;
border-top-right-radius:10px;
border-top-left-radius:10px;
color:#ECC223;
}
#test2 h2 {
cursor : pointer;
font : bold 9pt/20px sans-serif;
height : 20px;
margin : 0;
margin-left:20px;
padding : 0 10px;
}
</style>

<script type="text/javascript">
	window.onload = function () 
	{
	var bob = document.getElementById('test2');
	if (bob) 
		{
		bob.className = 'unactive';
		bob.firstChild.onclick = function() 
			{
			if(this.parentNode.className == 'unactive') {
			this.parentNode.className = 'active';
			} 
			else 
				{
				this.parentNode.className = 'unactive';
				}
			}
		}
	};
</script>

<title>Test</title>
<div id="test"><div name="second" id="tabtop"><h2>technologies</h2></div>
	
	<p>supported technologies:</p>
	<ul>
		<li>sql</li>
		<li>xslt</li>
		<li>tomcat</li>
	</ul>
	<ul>
		<li>html</li>
		<li>xml<li>
		<li>java</li>
	</ul>
	<ul>
		<li>css</li>
		<li>javascript</li>
		<li>xhtml</li>
	</ul>

</div>
<br/>
<div id="test2"><div id="tabtop"><h2>technologies</h2></div>
	
	<p>supported technologies:</p>
	<ul>
		<li>sql</li>
		<li>xslt</li>
		<li>tomcat</li>
	</ul>
	<ul>
		<li>html</li>
		<li>xml<li>
		<li>java</li>
	</ul>
	<ul>
		<li>css</li>
		<li>javascript</li>
		<li>xhtml</li>
	</ul>

</div>

[Logic Ali]

Just change the script block to this:

<script type="text/javascript">

window.onload = function () 
{
   setupDivs( "test", "test2" );     
};

function setupDivs( )
{
  var bob, args = arguments;
  
  for( var i = 0; arguments[ i ]; i++ )
  {
    bob = document.getElementById( arguments[ i ] );
  
    if (bob) 
    {
      bob.className = 'unactive';
      bob.getElementsByTagName( '*' )[0].onclick = f;
    }
  }
  
  function f() 
  {
   this.parentNode.className =  (this.parentNode.className == 'unactive') ? 'active' : 'unactive' ;      
  }      
}

</script>

[Xmonster]

Ali, you are awesome.