Page 1 of 1

SOLVED JavaScript Numerical Range Except Parameter specified

Posted: Fri Apr 04, 2008 10:57 pm
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>

Re: JavaScript Numerical Range Except Parameter specified?

Posted: Sat Apr 05, 2008 6:31 am
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:

Re: JavaScript Numerical Range Except Parameter specified?

Posted: Sat Apr 05, 2008 10:13 am
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>

* * SOLVED * *

Posted: Sun Apr 06, 2008 5:13 am
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>