SOLVED JavaScript Numerical Range Except Parameter specified

Any questions involving matching text strings to patterns - the pattern is called a "regular expression."

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

SOLVED JavaScript Numerical Range Except Parameter specified

Post by JAB Creations »

I actually caught on to a little regex yesterday matching Opera [4-6] and now I'm thinking, 'Hey, I could probably clean up a good bulk of my JavaScript if...'

So what I want to do is define the numerical range and execute a function for all the ID's on the page with that number except the ID with the number specified in the page.

So visually if you click on DIV4 of a total of nine divs then the range of IDs would be [1-3] + [5-9]. My goal for the script below is merely to change all the divs except for the one specified in the parameter when the function is called. I'm trying to do an alert to see the output but if anything all it's doing is adding up the numbers! :mrgreen:

Code: Select all

<!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">// Class Changefunction change(id, newClass){identity=document.getElementById(id);identity.className=newClass;} function switcher(selected) {//change('div'+[0-9](?!selected), 'off');change('div'+selected, 'on');//alert('div'+[0-9?(?!selected)]);} </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>
Last edited by JAB Creations on Sun Apr 06, 2008 5:12 am, edited 1 time in total.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: JavaScript Numerical Range Except Parameter specified?

Post by JAB Creations »

Here is something that is a little helpful! I just discovered you can use a parameter if you assign it to a variable. When I began trying this out up until now I was trying to use the parameter directly. :roll:

Code: Select all

function switcher(selected) {var $selected = selected;alert('div'+[$selected]);// etc etc...}
Now the script alerts the ID of the div selected, once it alerts every other ID except for the div selected then I think I'll be able to turn all the classes to off. I'm still not there yet so help would be much appreciated! :mrgreen:
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: JavaScript Numerical Range Except Parameter specified?

Post by JAB Creations »

This is as far as I have gotten and I'll be gone for a few hours...if anyone wants to help pick up any slack feel free. :mrgreen: I'm only receiving an error in Firefox but not Opera and I usually prefer Opera for JavaScript debugging because it tends to be more thorough.

Code: Select all

<!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>
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

* * SOLVED * *

Post by JAB Creations »

SOLVED!

Code: Select all

<!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>
Post Reply