Running Script onChange using Options

This site is best viewed in a modern browser with JavaScript enabled.

ElRojito

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

See if this makes sense to you...

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

JMRKER;1249633 wrote:
See if this makes sense to you...
<!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

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

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

<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

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

ElRojito

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

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

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

Js File:

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

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:

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

Then at the very bottom:

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

Here's another attempt: Still no-go.

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

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

ElRojito

Here's the latest attempt:

<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

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.

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

JMRKER;1249741 wrote:

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.

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

ElRojito

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

JMRKER

ElRojito;1249743 wrote:
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

JMRKER;1249753 wrote:
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

JMRKER

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?

ElRojito

Haha, indeed it is. It's the Philips Hue lighting system. They have a pretty open API so I'm just making this for my own enjoyment. There are some things the app doesn't allow you to do (yet) so I decided to give it a shot. The main thing (which I am tackling next) is fitting cron in there so. I can have a scheduler for it and then maybe even have JavaScript run an http GET, find how many lights you're using, and then add to the top bar accordingly.

I've been thinking of trying to learn C++ or objective C and maybe throw it into an actual program, but that'd be the first time I've done something like that.

JMRKER

ElRojito;1250031 wrote:
Haha, indeed it is. It's the Philips Hue lighting system. They have a pretty open API so I'm just making this for my own enjoyment. There are some things the app doesn't allow you to do (yet) so I decided to give it a shot. The main thing (which I am tackling next) is fitting cron in there so. I can have a scheduler for it and then maybe even have JavaScript run an http GET, find how many lights you're using, and then add to the top bar accordingly.

I've been thinking of trying to learn C++ or objective C and maybe throw it into an actual program, but that'd be the first time I've done something like that.

Good Luck!