www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Running Script onChange using Options

  1. #1
    Join Date
    Feb 2013
    Posts
    11

    Running Script onChange using Options

    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.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Lightbulb

    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>

  3. #3
    Join Date
    Feb 2013
    Posts
    11
    Quote Originally Posted by JMRKER View Post
    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.

  4. #4
    Join Date
    Feb 2013
    Posts
    11
    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.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373
    Please show your attempts at the change.
    Do you have a link which displays the lightswitch actions?

  6. #6
    Join Date
    Feb 2013
    Posts
    11
    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.

  7. #7
    Join Date
    Feb 2013
    Posts
    11
    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

  8. #8
    Join Date
    Feb 2013
    Posts
    11
    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

  9. #9
    Join Date
    Feb 2013
    Posts
    11

    Angry

    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>

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Lightbulb

    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>

  11. #11
    Join Date
    Feb 2013
    Posts
    11
    Quote Originally Posted by JMRKER View Post
    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!

  12. #12
    Join Date
    Feb 2013
    Posts
    11
    and so you know what's going on. This is what I'm basically doing: Ars Technica - Philips hue Light hacking

  13. #13
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Thumbs up

    Quote Originally Posted by ElRojito View Post
    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!

  14. #14
    Join Date
    Feb 2013
    Posts
    11
    Quote Originally Posted by JMRKER View Post
    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

  15. #15
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles