1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:42 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Regex range with exception or loop elementbyid?

I want to change the selected class on, all other classes off.

         

JAB Creations

12:54 pm on Apr 5, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm trying to become a bit more dynamic with my JavaScript by removing static values which to me means really utilizing parameters. While I could go with unobtrusive JavaScript I'm sticking to Modular JavaScript for backwards compatibility (functions and parameters are allowed to be in the body but nothing else).

With the script below I am trying to change all the classes, the selected to a class .on and all the other divs to .off. I have been trying to use regex though I figured I might want to use a JavaScript loop instead, ideas?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Regex Range Except specified Parameter</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
//<![CDATA[
// Class Change
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}

function switcher(selected) {
var $selected = selected;
alert('div'+[$selected]);
//change('div'+[0-9](?!selected), 'off');
change('div'+selected, 'on');
}
//]]>
</script>
<style type="text/css">
div.off {background-color: #fff; color: #000;}
div.on {background-color: #000; color: #fff;}
</style>
</head>

<body>

<div id="my_divs">
<div id="div1" onclick="switcher('1');">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>
</div><!-- /#my_divs -->

</body>
</html>

JAB Creations

7:20 pm on Apr 5, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Here is my latest code which is a slight improvement...

Visually the element we click should turn red and any already red element should turn back to blue.

- John

<!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) {
//alert('div'+the_id);
var selected = 'div'+the_id;
//alert(selected);
var give_me = document.getElementById(selected);

alert('div'+[1-9]);

document.getElementById(selected).className = 'toggle_on';

for (var i = 0; i < document.getElementById('div'+[1-9]).length; i++) {
if (document.getElementById(selected).className == 'toggle_on')
{document.getElementById(selected)[i].className = 'toggle_off';}
else
{els[i].className = 'toggle_on';}

}
return true;
}

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

<body>

<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>

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

mehh

8:06 pm on Apr 5, 2008 (gmt 0)

10+ Year Member



I made an unobtrusive version of this script here [webmasterworld.com] if it helps.

JAB Creations

8:33 pm on Apr 5, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I can convert body, modular, and unobtrusive scripts between each other for the most part...getting it to work is the main issue.

I am thinking I need to specify a master ID and then scan for childnodes/IDs?

- John

JAB Creations

10:05 am on Apr 6, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



SOLVED!
There were two difficult parts to figure out. First the for loop was difficult to comprehend without a useful example. Secondly appending the dynamic array of numbers to the element IDs took a few guesses. There was one other quirk though it was not as difficult because it was simple logic, changing the selected ID's class after the for loop is executed.

As with all my posts, here is a fully functional test case to help those with similar goals! :)

- John

<!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;

var give_me = document.getElementById(selected);

// 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>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:42 am May 14, 2026