Running Script onChange using Options

**ElRojito** · 02-09-2013 04:00 PM

Hey there,

Been lurking a bit and couldn't find the answer. Basically I have a bunch of buttons that I want to turn into a drop down menu and have the code be executed onChange. But, I'm a javascript n00b and am having a hard time figuring out how this would work. I somewhat got it to work, but I couldn't get it to work with more than one option.
Here's what I have:

<button class="lightbutton" onclick="lightswitch(1,true);lightswitch(2,true);lightswitch(3,true);">All lights on</button>
<button class="lightbutton" onclick="lightswitch(1,false);lightswitch(2,false);lightswitch(3,false);">All lights off</button>

I got the lights to turn on by doing this:

<form name="functions">
<select name="jumpmenu" onChange="lightswitch(1,true);lightswitch(2,true);lightswitch(3,true);">
<option>LightFunctions</option>
<option value="";>Light 1 On</option>
</select>
</form>

Now, I see why it works -- it's just telling it that whenever it changes to turn on all the lights. But how do I change the "onChange" to make it so it gets whichever option I have chosen?

I appreciate the help.

**JMRKER** · 02-09-2013 09:14 PM

See if this makes sense to you...

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Untitled </title>
<script type="text/javascript">
function lightswitch(which,onoff) {
  var num = Math.abs(parseInt(which));
  if (onoff) { alert('Light #'+num+' is on'); }
        else { alert('Light #'+num+' is off'); }
}
</script>

<style type="text/css">

</style>
</head>
<body>
<form name="functions">
<select name="jumpmenu" onChange="setLights(this.value)">
  <option value="">LightFunctions</option>
  <option value="1";>Light 1 On</option>
  <option value="2";>Light 2 On</option>
  <option value="3";>Light 3 On</option>
  <option value="4";>All Lights On</option>
  <option value="-1";>Light 1 Off</option>
  <option value="-2";>Light 2 Off</option>
  <option value="-3";>Light 3 Off</option>
  <option value="-4";>All Lights Off</option>
</select>
</form> 
<script type="text/javascript">
function setLights(info) { if (info == '') { return; }
  switch (info) {
    case "1" : lightswitch(1,true); break;
    case "2" : lightswitch(2,true); break;
    case "3" : lightswitch(3,true); break;
    case "4" : lightswitch(1,true); lightswitch(2,true); lightswitch(3,true); break;
    case "-1" : lightswitch(1,false); break;
    case "-2" : lightswitch(2,false); break;
    case "-3" : lightswitch(3,false); break;
    case "-4" : lightswitch(1,false); lightswitch(2,false); lightswitch(3,false); break;
    default : alert('Error'); break;
  }
}
</script>

</body>
</html>

**ElRojito** · 02-09-2013 11:07 PM

Originally Posted by JMRKER

See if this makes sense to you...

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Untitled </title>
<script type="text/javascript">
function lightswitch(which,onoff) {
  var num = Math.abs(parseInt(which));
  if (onoff) { alert('Light #'+num+' is on'); }
        else { alert('Light #'+num+' is off'); }
}
</script>

<style type="text/css">

</style>
</head>
<body>
<form name="functions">
<select name="jumpmenu" onChange="setLights(this.value)">
  <option value="">LightFunctions</option>
  <option value="1";>Light 1 On</option>
  <option value="2";>Light 2 On</option>
  <option value="3";>Light 3 On</option>
  <option value="4";>All Lights On</option>
  <option value="-1";>Light 1 Off</option>
  <option value="-2";>Light 2 Off</option>
  <option value="-3";>Light 3 Off</option>
  <option value="-4";>All Lights Off</option>
</select>
</form> 
<script type="text/javascript">
function setLights(info) { if (info == '') { return; }
  switch (info) {
    case "1" : lightswitch(1,true); break;
    case "2" : lightswitch(2,true); break;
    case "3" : lightswitch(3,true); break;
    case "4" : lightswitch(1,true); lightswitch(2,true); lightswitch(3,true); break;
    case "-1" : lightswitch(1,false); break;
    case "-2" : lightswitch(2,false); break;
    case "-3" : lightswitch(3,false); break;
    case "-4" : lightswitch(1,false); lightswitch(2,false); lightswitch(3,false); break;
    default : alert('Error'); break;
  }
}
</script>

</body>
</html>

Awesome. I'll impliment it and report back.

**ElRojito** · 02-10-2013 01:03 AM

Works awesome! Now my next step is to see if I can a dropdown to control the light color. I have been banging my head against my desk trying to figure this out for the past 4 hours. I'm sure it's something really stupid as well. I have a variable, and some options, I basically just want

Code:

"lightcolor(1,colorred);"

to not JUST be 1,colorred, but rather I want it to grab whichever option I select and replace it with the corresponding option. Example:

Code:

<select name="jumpmenu" onChange="lightcolor(1,colorred);">
<option value="">Light 1</option>
<option value="1";>Red</option>
<option value="2";>Orange</option>
<option value="3";>Green</option>
<option value="4";>Blue</option>
<option value="5";>Pink</option>
<option value="6";>Pastel</option>
</select>

So I have my drop down and if I had selected red, the onChange = "light color(1,colored);"> now would work. But if I select orange, it turns into onChange="light color(1,color orange);">. I have these variables in a js file that it's pulling from that are named colorred,orange,blue etc.

**JMRKER** · 02-10-2013 09:44 AM

Please show your attempts at the change.
Do you have a link which displays the lightswitch actions?

**ElRojito** · 02-10-2013 11:55 AM

I can definitely show my attempts, but just a warning, they're pretty bad haha. I don't have a link because it runs off of my home network and actually changes my lights. Ill dig up some other attempts.

**ElRojito** · 02-10-2013 02:43 PM

Code:

<select name="jumpmenu" onChange="jumpChange(this.options[this.selectedIndex].value);">
<option value="">Light 1</option>
<option value="1">Red</option>
<option value="2">Orange</option>
</select>
<script language="javascript">
function jumpChange(sel) {
	//var val = sel.value;
	var val = sel;
    if (val === "") return; 
	switch(val)	{
		case '1': var colorred={"on":true,"hue":15331,"sat":121,"xy":[0.1721,0.0500],"ct":343,"transitiontime":100}
 
			
		case '2':
			    var colororange={"on":true,"bri":254,"hue":13390,"sat":251,"xy":[0.5663,0.3978],"ct":500, "transitiontime":20}  // orange color 
			break;
	}
}
</script>

So I tried this, still not working. Like I showed before, I have this going on on another js file that does work when I hit a button.
HTML file:

Code:

<button class="lightbuttontall" onclick="lightcolor(1,colorred);">Light 1 red</button>

Js File:

Code:

var xmlhttp
var bridge="192.168.1.2"
var hash="1fe041353d204ca7387f1c0131a8a7d3"

Code:

var colorred= "{\"on\":true,\"bri\":255,\"hue\":836,\"sat\":237,\"xy\":[0.6472,0.3316],\"ct\":500}"
var colororange="{\"on\":true,\"bri\":254,\"hue\":13390,\"sat\":251,\"xy\":[0.5663,0.3978],\"ct\":500}"

and then, further down, the functions to do an HTTP PUT command to the Philips hue bridge that is running a json API:

Code:

function lightcolor(light,color){
	execute('PUT', 'http://'+bridge+'/api/'+hash+'/lights/'+light+'/state', color);
}

Then at the very bottom:

Code:

function execute($method,$url,$message){
xmlhttp=new XMLHttpRequest();
xmlhttp.open($method,$url,true)
xmlhttp.send($message);
}

I just don't think I have the right onChange command working. I've confused myself :S

**ElRojito** · 02-10-2013 03:27 PM

Here's another attempt: Still no-go.

Code:

<select name="jumpmenu" onChange="jumpChange(this.option);">
<option value="">Light 1</option>
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Green</option>
<option value="4">Blue</option>
<option value="5">Pink</option>
<option value="6">Pastel</option>
</select>
<script language="javascript">
function jumpChange(light,color) {
	//var val = sel.value;
	var val = sel;
    if (val === "") return; 
	switch(val)	{
		case '1':("1, colorred")
 // red color FC6305
			//document.getElementById("divcolor").style.backgroundColor='#'+ colorred ;  // red color FC6305
			break;

I jst don't get how this works:

Code:

<select name="jumpmenu" onChange="lightcolor(1,colorblue);">
<option value="">Light 1</option>
<option value="";>Red</option>
<option value="2";>Orange</option>
<option value="3";>Green</option>
<option value="4";>Blue</option>
<option value="5";>Pink</option>
<option value="6";>Pastel</option>
</select>

Now, it only changes to the color blue, becuase it's basically saying "any time this changes, turn the light to the color blue". but I don't know how to make it so that the "onChange" can be changed to let's say "lightcolor(1,colorred);" or "lightcolor(1,color pink);" dependent upon the option that I choose.

http://i826.photobucket.com/albums/z...OnKeyboard.gif

**ElRojito** · 02-10-2013 07:18 PM

Here's the latest attempt:

Code:

<form name="functions">
<select name="jumpmenu" onChange="lightcolor(1,colorred)">
  <option value="">LightFunctions</option>
  <option value="1";>Red</option>
  <option value="2";>Blue</option>
  <option value="3";>Orange</option>
  <option value="4";>All Lights On</option>
  <option value="-1";>Light 1 Off</option>
  <option value="-2";>Light 2 Off</option>
  <option value="-3";>Light 3 Off</option>
  <option value="-4";>All Lights Off</option>
</select>
</form> 
<script type="text/javascript">
function lightcolor(light,color) {
    if (light,color === '') {
        return;
    }
    switch (light,color) {
        case "1":
            lightcolor(1,colorred);
            break;
        case "2":
            lightcolor(1, colorblue);
            break;
        case "3":
            lightcolor(1, colororange);
            break;
        case "4":
            lightswitch(1, true);
            lightswitch(2, true);
            lightswitch(3, true);
            break;
        case "-1":
            lightswitch(1, false);
            break;
        case "-2":
            lightswitch(2, false);
            break;
        case "-3":
            lightswitch(3, false);
            break;
        case "-4":
            lightswitch(1, false);
            lightswitch(2, false);
            lightswitch(3, false);
            break;
        default:
            alert('Error');
            break;
    }

}



var colororange = "{\"on\":true,\"bri\":0,\"hue\":15331,\"sat\":121,\"xy\":[0.1721,0.0500],\"ct\":343}";
var colorred = "{\"on\":true,\"bri\":255,\"hue\":15331,\"sat\":121,\"xy\":[0.1721,0.0500],\"ct\":343}";

function lightcolor(light,color) {
    execute('PUT', 'http://' + bridge + '/api/' + hash + '/lights/1/state', color);

}
</script>

**JMRKER** · 02-10-2013 08:32 PM

I know nothing about your "lightswitch" controller, so the following is just a simulation
and you will need to modify it to meet your needs.

I would suggest you read up a bit on the creation of functions and their arguments.
Use the following as a start point toward that goal.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Light Switch Simulation </title>
<script type="text/javascript">
function lightswitch(which,onoff) {
  var lightID = 'light'+which;  // alert(lightID+': '+onoff);
  var num = Math.abs(parseInt(which));
  if (onoff) { document.getElementById(lightID).style.visibility = 'visible'; }
        else { document.getElementById(lightID).style.visibility = 'hidden'; }
}
function lightswitchColor(which,lightColor) {
  var lightID = 'light'+which;  // alert(lightID+': '+lightColor);
  document.getElementById(lightID).style.backgroundColor = lightColor; 
}
</script>

<style type="text/css">
.light { height:100px; width:200px; 
         margin:20px 0px;
         border:1px solid black;
         background-Color:white;
         visibility:hidden;
}
</style>
</head>
<body>
<form name="functions">
<div class="light" id='light1'> Light 1 </div>
<div class="light" id='light2'> Light 2 </div>
<div class="light" id='light3'> Light 3 </div>
<p>
<select name="jumpmenu1" onChange="setLightsOnOff(this.value)">
  <option value="">Light Switch</option>
  <option value="1";>Light 1 On</option>
  <option value="2";>Light 2 On</option>
  <option value="3";>Light 3 On</option>
  <option value="4";>All Lights On</option>
  <option value="-1";>Light 1 Off</option>
  <option value="-2";>Light 2 Off</option>
  <option value="-3";>Light 3 Off</option>
  <option value="-4";>All Lights Off</option>
</select>

<select name="jumpmenu2" onChange="setLightColors(this.value)">
  <option value="">Light Colors</option>
  <option value="11";>Light 1 Red</option>
  <option value="21";>Light 2 Red</option>
  <option value="31";>Light 3 Red</option>
  <option value="12";>Light 1 Green</option>
  <option value="22";>Light 2 Green</option>
  <option value="32";>Light 3 Green</option>
  <option value="13";>Light 1 Blue</option>
  <option value="23";>Light 2 Blue</option>
  <option value="33";>Light 3 Blue</option>
  <option value="0";>Reset All</option>
</select>
</form> 
<script type="text/javascript">

function setLightsOnOff(info) {
  if (info == '') { return; }
  switch (info) {
    case "1"  : lightswitch(1,true); break;
    case "2"  : lightswitch(2,true); break;
    case "3"  : lightswitch(3,true); break;
    case "4"  : lightswitch(1,true); lightswitch(2,true); lightswitch(3,true); break;
    case "-1" : lightswitch(1,false); break;
    case "-2" : lightswitch(2,false); break;
    case "-3" : lightswitch(3,false); break;
    case "-4" : lightswitch(1,false); lightswitch(2,false); lightswitch(3,false); break;
    default : alert('Error'); break;
  }
}

function setLightColors(info) {
  if (info == '') { return; }
  switch (info) {
    case '0'  : lightswitchColor(1,'transparent'); lightswitchColor(2,'transparent');
              	lightswitchColor(3,'transparent'); break;
    case "11" : lightswitchColor(1,'#ff0000'); break;
    case "21" : lightswitchColor(2,'#ff0000'); break;
    case "31" : lightswitchColor(3,'#ff0000'); break;
    case "12" : lightswitchColor(1,'#00ff00'); break;
    case "22" : lightswitchColor(2,'#00ff00'); break;
    case "32" : lightswitchColor(3,'#00ff00'); break;
    case "13" : lightswitchColor(1,'#0000ff'); break;
    case "23" : lightswitchColor(2,'#0000ff'); break;
    case "33" : lightswitchColor(3,'#0000ff'); break;
    default : alert('Error'); break;
  }
}

</script>

</body>
</html>

**ElRojito** · 02-10-2013 08:40 PM

Originally Posted by JMRKER

I know nothing about your "lightswitch" controller, so the following is just a simulation
and you will need to modify it to meet your needs.

I would suggest you read up a bit on the creation of functions and their arguments.
Use the following as a start point toward that goal.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Light Switch Simulation </title>
<script type="text/javascript">
function lightswitch(which,onoff) {
  var lightID = 'light'+which;  // alert(lightID+': '+onoff);
  var num = Math.abs(parseInt(which));
  if (onoff) { document.getElementById(lightID).style.visibility = 'visible'; }
        else { document.getElementById(lightID).style.visibility = 'hidden'; }
}
function lightswitchColor(which,lightColor) {
  var lightID = 'light'+which;  // alert(lightID+': '+lightColor);
  document.getElementById(lightID).style.backgroundColor = lightColor; 
}
</script>

<style type="text/css">
.light { height:100px; width:200px; 
         margin:20px 0px;
         border:1px solid black;
         background-Color:white;
         visibility:hidden;
}
</style>
</head>
<body>
<form name="functions">
<div class="light" id='light1'> Light 1 </div>
<div class="light" id='light2'> Light 2 </div>
<div class="light" id='light3'> Light 3 </div>
<p>
<select name="jumpmenu1" onChange="setLightsOnOff(this.value)">
  <option value="">Light Switch</option>
  <option value="1";>Light 1 On</option>
  <option value="2";>Light 2 On</option>
  <option value="3";>Light 3 On</option>
  <option value="4";>All Lights On</option>
  <option value="-1";>Light 1 Off</option>
  <option value="-2";>Light 2 Off</option>
  <option value="-3";>Light 3 Off</option>
  <option value="-4";>All Lights Off</option>
</select>

<select name="jumpmenu2" onChange="setLightColors(this.value)">
  <option value="">Light Colors</option>
  <option value="11";>Light 1 Red</option>
  <option value="21";>Light 2 Red</option>
  <option value="31";>Light 3 Red</option>
  <option value="12";>Light 1 Green</option>
  <option value="22";>Light 2 Green</option>
  <option value="32";>Light 3 Green</option>
  <option value="13";>Light 1 Blue</option>
  <option value="23";>Light 2 Blue</option>
  <option value="33";>Light 3 Blue</option>
  <option value="0";>Reset All</option>
</select>
</form> 
<script type="text/javascript">

function setLightsOnOff(info) {
  if (info == '') { return; }
  switch (info) {
    case "1"  : lightswitch(1,true); break;
    case "2"  : lightswitch(2,true); break;
    case "3"  : lightswitch(3,true); break;
    case "4"  : lightswitch(1,true); lightswitch(2,true); lightswitch(3,true); break;
    case "-1" : lightswitch(1,false); break;
    case "-2" : lightswitch(2,false); break;
    case "-3" : lightswitch(3,false); break;
    case "-4" : lightswitch(1,false); lightswitch(2,false); lightswitch(3,false); break;
    default : alert('Error'); break;
  }
}

function setLightColors(info) {
  if (info == '') { return; }
  switch (info) {
    case '0'  : lightswitchColor(1,'transparent'); lightswitchColor(2,'transparent');
              	lightswitchColor(3,'transparent'); break;
    case "11" : lightswitchColor(1,'#ff0000'); break;
    case "21" : lightswitchColor(2,'#ff0000'); break;
    case "31" : lightswitchColor(3,'#ff0000'); break;
    case "12" : lightswitchColor(1,'#00ff00'); break;
    case "22" : lightswitchColor(2,'#00ff00'); break;
    case "32" : lightswitchColor(3,'#00ff00'); break;
    case "13" : lightswitchColor(1,'#0000ff'); break;
    case "23" : lightswitchColor(2,'#0000ff'); break;
    case "33" : lightswitchColor(3,'#0000ff'); break;
    default : alert('Error'); break;
  }
}

</script>

</body>
</html>

You, sir, are a saint. You have no idea how much I really do appreciate your help. I didn't want to be the choob that gets on here, gets his code and bails, thus I wanted to make sure you guys knew I was actually trying! I will do that. I'll let you know how it goes. Thanks again!

**JMRKER** · 02-10-2013 10:03 PM

Originally Posted by ElRojito

You, sir, are a saint. You have no idea how much I really do appreciate your help. I didn't want to be the choob that gets on here, gets his code and bails, thus I wanted to make sure you guys knew I was actually trying! I will do that. I'll let you know how it goes. Thanks again!

You are most welcome.
Happy to help, if I can.
Keep us posted and Good Luck!

**ElRojito** · 02-11-2013 11:07 PM

Originally Posted by JMRKER

You are most welcome.
Happy to help, if I can.
Keep us posted and Good Luck!

Jus thought you may be interested in seeing how the project is coming along!

http://youtu.be/u3d_GIizs6g

**ElRojito** · 02-10-2013 08:42 PM

and so you know what's going on. This is what I'm basically doing: Ars Technica - Philips hue Light hacking

**JMRKER** · 02-12-2013 08:50 AM

Not bad! What is the name of the light controller you are using?
Under what situations are you using the lighting? Presentations? Dancing? Mood lighting?

BTW: Is the Kilroy on the left in the video you?

Thread: Running Script onChange using Options

Thread Tools

Display

Hybrid View

Running Script onChange using Options

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions