JavaScript For Loop className changer?

**JAB Creations** · 04-05-2008, 03:16 PM

I am trying to get the following code to change the class of the clicked div to 'toggle_on' and to dynamically (through the for loop) change ids of all the other classes to 'toggle_off'. I'm stuck at more points then there are errors on a non-validating Microsoft/Myspace page, here is my code...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function switcher(theselected) {
var selected = 'div'+theselected;
alert(selected);

var change = document.getElementById(selected);
//alert(change);

//alert(els);

for (var i = 0; i < selected.length; i++) {

if (selected[i].value == selected)
selected[i].className = 'toggle_on';
else
selected[i].className = 'toggle_off';
}
return true;
}
</script>
<style>
.toggle_off {color: #0000ff;}
.toggle_on {color: #ff0000;}
</style>
</head>

<body>

<div id="div1" onclick="switcher(this);">1</div>
<div id="div2" onclick="switcher('2');">2</div>
<div id="div3" onclick="switcher('3');">3</div>
<div id="div4" onclick="switcher('4');">4</div>
<div id="div5" onclick="switcher('5');">5</div>
<div id="div6" onclick="switcher('6');">6</div>
<div id="div7" onclick="switcher('7');">7</div>
<div id="div8" onclick="switcher('8');">8</div>
<div id="div9" onclick="switcher('9');">9</div>

<table id="thisTable" border=1>
<tr>
<td class="toggle_off" id="div10">10</td>
<td class="toggle_off" id="div11">11</td>
<td class="toggle_off" id="div12">12</td>
<td class="toggle_off" id="div13">13</td>
<td class="toggle_off" id="div14">14</td></tr>
</table>
</body>
</html>

**codeexploiter** · 04-07-2008, 03:31 AM

There are some problems in your furnished script. if you look at your function switcher its been called in two different manner from the arguments passing to it point of view. For the first time you are passing an object to the function and next time onwards a string based parameter. This is ok as far as JavaScript is concerened but you need to write required instruction in the switcher function which you haven't done properly.

I wouldn't say I understood your question completely but I have made some changes in the code you've provided to check whether it is what you are looking for.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
	function switcher(theselected) {
	if(typeof theselected == 'string'){
		var selected = 'div'+theselected;
		selected = document.getElementById(selected);
	}else if(typeof theselected == 'object'){
		var selected = theselected;	
	}
	var divs = document.getElementsByTagName('div');
	var tds = document.getElementById("thisTable").getElementsByTagName('td');

	for (var i = 0; i < divs.length; i++) {
		if (selected == divs[i])
			selected.className = 'toggle_on';
		else
			divs[i].className = 'toggle_off';
	}
	return true;
	}
</script>
<style>
.toggle_off {color: #0000ff;}
.toggle_on {color: #ff0000;}
</style>
</head>

<body>

<div id="div1" onclick="switcher(this);">1</div>
<div id="div2" onclick="switcher('2');">2</div>
<div id="div3" onclick="switcher('3');">3</div>
<div id="div4" onclick="switcher('4');">4</div>
<div id="div5" onclick="switcher('5');">5</div>
<div id="div6" onclick="switcher('6');">6</div>
<div id="div7" onclick="switcher('7');">7</div>
<div id="div8" onclick="switcher('8');">8</div>
<div id="div9" onclick="switcher('9');">9</div>


<table id="thisTable" border="1">
<tr>
<td class="toggle_off" id="div10">10</td>
<td class="toggle_off" id="div11">11</td>
<td class="toggle_off" id="div12">12</td>
<td class="toggle_off" id="div13">13</td>
<td class="toggle_off" id="div14">14</td></tr>
</table>
</body>
</html>

I haven't included the table content in the part of div as you haven't mentioned that fact in your post. Let me know more details about this so me or some other forum users can help you.

**JAB Creations** · 04-07-2008, 10:12 AM

I actually resolved the issue yesterday morning but forgot to post my answer. Here it is...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function switcher(the_id) {
var selected = 'div'+the_id;

// 19 or greater will not change, merely increase the range. ;-)
for (i=1;i<19;i++) {
if (document.getElementById('div'+[i]).className == 'toggle_on')
{document.getElementById('div'+[i]).className = 'toggle_off'}
}
document.getElementById(selected).className = 'toggle_on';
}

</script>
<style>
.toggle_off {background-color: #00f;}
.toggle_on {background-color: #f00;}
</style>
</head>

<body>

<div id="master">
<div class="toggle_off" id="div1" onclick="switcher('1');">1</div>
<div class="toggle_off" id="div2" onclick="switcher('2');">2</div>
<div class="toggle_off" id="div3" onclick="switcher('3');">3</div>
<div class="toggle_off" id="div4" onclick="switcher('4');">4</div>
<div class="toggle_off" id="div5" onclick="switcher('5');">5</div>
<div class="toggle_off" id="div6" onclick="switcher('6');">6</div>
<div class="toggle_off" id="div7" onclick="switcher('7');">7</div>
<div class="toggle_off" id="div8" onclick="switcher('8');">8</div>
<div class="toggle_off" id="div9" onclick="switcher('9');">9</div>
<div class="toggle_off" id="div10" onclick="switcher('10');">10</div>
<div class="toggle_off" id="div11" onclick="switcher('11');">11</div>
<div class="toggle_off" id="div12" onclick="switcher('12');">12</div>
<div class="toggle_off" id="div13" onclick="switcher('13');">13</div>
<div class="toggle_off" id="div14" onclick="switcher('14');">14</div>
<div class="toggle_off" id="div15" onclick="switcher('15');">15</div>
<div class="toggle_off" id="div16" onclick="switcher('16');">16</div>
<div class="toggle_off" id="div17" onclick="switcher('17');">17</div>
<div class="toggle_off" id="div18" onclick="switcher('18');">18</div>
<div class="toggle_off" id="div19" onclick="switcher('19');">19</div>
</div>

</body>
</html>

**codeexploiter** · 04-07-2008, 10:39 AM

Code:

/**
* Function that changes the class information of div elements.
* @param {String} the final part of the id of the clicked element.
* @return {void}
*/
function switcher(the_id){
		var chngDivs = document.getElementById('master').getElementsByTagName('div');
		var selected = document.getElementById('div' + the_id);
		selected.className = 'toggle_on';
		for(var i = 0; i < chngDivs.length; i++){
			if(selected == chngDivs[i]) continue;
			chngDivs[i].className = 'toggle_off';
		}	
}

I've changed a bit of your function so that you don't haven't make a range of div elements like the way you've done in your code. In you code if you insert additional div elements then you have to change the JS part as you might want to change all the div elements's class name which are the childs of 'master' div element. In your code you need to make sure that the for loop counter and the number of div elements in your page as well as it used to assign the class 'toggle_on' to the clicked element in all the iterations.

Thread: JavaScript For Loop className changer?

Thread Tools

Search Thread

JavaScript For Loop className changer?

Bookmarks

Bookmarks

Posting Permissions