17505


質問の要点を分かりやすくするために、ソースコードを簡略化しました。  
サイト関係者に迷惑をかけまして、申し訳ありませんでした。

質問ですが、画面を見ていただけると分かりますが、selectのそれぞれのカラーボタン(Ｄ･Ｆ･Ｈ･Ｍ･Ｓ)を同一色に押した場合、時計全体の色を付けるＣボタンそのものの色も同じになるように設定したいのです。１つでも違う色が設定されれば、Ｃボタンは白になるように設定しています。

もう1つの質問は、一度時計を消したら、好みに設定した時計の色をその背景色のときの初期の状態に戻すようにしたいのです。  
ソースコードでは、背景色がsilverのときの初期の時計の色は"mediumblue"，背景色がmediumblueのときの初期の時計の色は"black"，背景色が"black"のときの初期の時計の色は"silver"と設定しています。

2つの質問とも"ifの条件式"で組み立てる必要があると思いますが、うまくいかなくて頭が混乱しています。ご教示お願いします。

[code]

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> 
        <meta http-equiv="Content-Script-Type" content="text/javascript">
    
        <title></title>
    
        <style type="text/css">
        <!--
        .butt {
            BACKGROUND:maroon; 
            COLOR:gold;
        }
        #clock {
            color:silver;
        }
        #clockCOLOR {
            background:lightpink;
            background-color:silver;
            color:black;
        }
        #color1 {
            background:lightpink;
            background-color:silver;
            color:black;
        }
        #color2 {
            background:lightpink;
            background-color:silver;
            color:black;
        }
        #color3 {
            background:lightpink;
            background-color:silver;
            color:black;
        }
        #color4 {
            background:lightpink;
            background-color:silver;
            color:black;
        }
        #color5 {
            background:lightpink;
            background-color:silver;
            color:black;
        }
        //-->
        </style>
    
        <script type="text/javascript"> 
        <!--
        function bg1() {
            document.bgColor = "silver";
            document.getElementById('Od').style.color='mediumblue';
            document.getElementById('Of').style.color='mediumblue';
            document.getElementById('Oh').style.color='mediumblue';
            document.getElementById('Om').style.color='mediumblue';
            document.getElementById('Os').style.color='mediumblue';
            document.getElementById("clockCOLOR").style.background="mediumblue";
            document.getElementById("color1").style.background="mediumblue";
            document.getElementById("color2").style.background="mediumblue";
            document.getElementById("color3").style.background="mediumblue";
            document.getElementById("color4").style.background="mediumblue";
            document.getElementById("color5").style.background="mediumblue";
        }
        function bg2() {
            document.bgColor = "mediumblue";
            document.getElementById('Od').style.color='black';
            document.getElementById('Of').style.color='black';
            document.getElementById('Oh').style.color='black';
            document.getElementById('Om').style.color='black';
            document.getElementById('Os').style.color='black';
            document.getElementById("clockCOLOR").style.background="black";
            document.getElementById("color1").style.background="black";
            document.getElementById("color2").style.background="black";
            document.getElementById("color3").style.background="black";
            document.getElementById("color4").style.background="black";
            document.getElementById("color5").style.background="black";
        }
        function bg3() {
            document.bgColor = "black";
            document.getElementById('Od').style.color='silver';
            document.getElementById('Of').style.color='silver';
            document.getElementById('Oh').style.color='silver';
            document.getElementById('Om').style.color='silver';
            document.getElementById('Os').style.color='silver';
            document.getElementById("clockCOLOR").style.background="silver";
            document.getElementById("color1").style.background="silver";
            document.getElementById("color2").style.background="silver";
            document.getElementById("color3").style.background="silver";
            document.getElementById("color4").style.background="silver";
            document.getElementById("color5").style.background="silver";
        }
        //-->
        </script>
    
        <script type="text/javascript">
        <!--
        function clockCOLOR1() {
            document.getElementById("Od").style.color="silver";
            document.getElementById("Of").style.color="silver";
            document.getElementById("Oh").style.color="silver";
            document.getElementById("Om").style.color="silver";
            document.getElementById("Os").style.color="silver";
            document.getElementById("clockCOLOR").style.background="silver";
            document.getElementById("color1").style.background="silver";
            document.getElementById("color2").style.background="silver";
            document.getElementById("color3").style.background="silver";
            document.getElementById("color4").style.background="silver";
            document.getElementById("color5").style.background="silver";
        }
        function clockCOLOR2() {
            document.getElementById("Od").style.color="mediumblue";
            document.getElementById("Of").style.color="mediumblue";
            document.getElementById("Oh").style.color="mediumblue";
            document.getElementById("Om").style.color="mediumblue";
            document.getElementById("Os").style.color="mediumblue";
            document.getElementById("clockCOLOR").style.background="mediumblue";
            document.getElementById("color1").style.background="mediumblue";
            document.getElementById("color2").style.background="mediumblue";
            document.getElementById("color3").style.background="mediumblue";
            document.getElementById("color4").style.background="mediumblue";
            document.getElementById("color5").style.background="mediumblue";
        }
        function clockCOLOR3() {
            document.getElementById("Od").style.color="black";
            document.getElementById("Of").style.color="black";
            document.getElementById("Oh").style.color="black";
            document.getElementById("Om").style.color="black";
            document.getElementById("Os").style.color="black";
            document.getElementById("clockCOLOR").style.background="black";
            document.getElementById("color1").style.background="black";
            document.getElementById("color2").style.background="black";
            document.getElementById("color3").style.background="black";
            document.getElementById("color4").style.background="black";
            document.getElementById("color5").style.background="black";
        }
        function Col11() {
            document.getElementById("Od").style.color="silver";
            document.getElementById("color1").style.background="silver";
            document.getElementById("clockCOLOR").style.background="white";
        }
        function Col12() {
            document.getElementById("Od").style.color="mediumblue";
            document.getElementById("color1").style.background="mediumblue";
            document.getElementById("clockCOLOR").style.background="white";
        }
        function Col13() {
            document.getElementById("Od").style.color="black";
            document.getElementById("color1").style.background="black";
            document.getElementById("clockCOLOR").style.background="white";
        }
        function Col21() {
            document.getElementById("Of").style.color="silver";
            document.getElementById("color2").style.background="silver";
            document.getElementById("clockCOLOR").style.background="white";
        }
        function Col22() {
            document.getElementById("Of").style.color="mediumblue";
            document.getElementById("color2").style.background="mediumblue";
            document.getElementById("clockCOLOR").style.background="white";
        }
        function Col23() {
            document.getElementById("Of").style.color="black";
            document.getElementById("color2").style.background="black";
            document.getElementById("clockCOLOR").style.background="white";
        }
        function Col31() {
            document.getElementById("Oh").style.color="silver";
            document.getElementById("color3").style.background="silver";
            document.getElementById("clockCOLOR").style.background="white";
        }
        function Col32() {
            document.getElementById("Oh").style.color="mediumblue";
            document.getElementById("color3").style.background="mediumblue";
            document.getElementById("clockCOLOR").style.background="white";
        }
        function Col33() {
            document.getElementById("Oh").style.color="black";
            document.getElementById("color3").style.background="black";
            document.getElementById("clockCOLOR").style.background="white";
        }
        function Col41() {
            document.getElementById("Om").style.color="silver";
            document.getElementById("color4").style.background="silver";
            document.getElementById("clockCOLOR").style.background="white";
        }
        function Col42() {
            document.getElementById("Om").style.color="mediumblue";
            document.getElementById("color4").style.background="mediumblue";
            document.getElementById("clockCOLOR").style.background="white";
        }
        function Col43() {
            document.getElementById("Om").style.color="black";
            document.getElementById("color4").style.background="black";
            document.getElementById("clockCOLOR").style.background="white";
        }
        function Col51() {
            document.getElementById("Os").style.color="silver";
            document.getElementById("color5").style.background="silver";
            document.getElementById("clockCOLOR").style.background="white";
        }
        function Col52() {
            document.getElementById("Os").style.color="mediumblue";
            document.getElementById("color5").style.background="mediumblue";
            document.getElementById("clockCOLOR").style.background="white";
        }
        function Col53() {
            document.getElementById("Os").style.color="black";
            document.getElementById("color5").style.background="black";
            document.getElementById("clockCOLOR").style.background="white";
        }
        //-->
        </script>
      </head>
    
      <body bgcolor="black">
        <div id="clock" style="visibility:hidden">
          <div id="Od" style="position:absolute;top:0px;left:0px">
            <div style="position:relative">
            </div>
          </div>
          <div id="Of" style="position:absolute;top:0px;left:0px">
            <div style="position:relative">
            </div>
          </div>
          <div id="Oh" style="position:absolute;top:0px;left:0px">
            <div style="position:relative">
            </div>
          </div>
          <div id="Om" style="position:absolute;top:0px;left:0px">
            <div style="position:relative">
            </div>
          </div>
          <div id="Os" style="position:absolute;top:0px;left:0px">
            <div style="position:relative">
            </div>
          </div>
        </div>
    
        <script type="text/javascript">
    
        (function() {
            "use strict";
    
            function $(sel) {
                return document.getElementById(sel);
            }   
    
            function $$(sel) {
              if (typeof document.getElementsByClassName === 'undefined') {
                  return document.getElementsByName(sel);
              }
              return document.getElementsByClassName(sel);
            }
    
            var dCol = '', //date colour.
                sCol = '', //seconds colour.
                mCol = '', //minutes colour.
                hCol = '', //hours colour.
                fCol = '', //face color
                ClockHeight = 40,
                ClockWidth = 40,
                ClockFromMouseY = 0,
                ClockFromMouseX = 100,
                d = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
                m = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                date = new Date(),
                day = date.getDate(),
                year = date.getYear() + 1900;
    
            var TodaysDate = " " + d[date.getDay()] + " " + day + " " + m[date.getMonth()] + " " + year;
            var D = TodaysDate.split('');
            var H = '...';
            H = H.split('');
            var M = '....';
            M = M.split('');
            var S = '.....';
            S = S.split('');
            var Face = '1 2 3 4 5 6 7 8 9 10 11 12',
                font = 'Helvetica, Arial, sans-serif',
                size = 1,
                speed = 0.6;
            Face = Face.split(' ');
            var n = Face.length;
            var a = size * 10;
            var ymouse = 0,
                xmouse = 0,
                scrll = 0,
                props = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + fCol + '">',
                props2 = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '">';
            var Split = 360 / n;
            var Dsplit = 360 / D.length;
            var HandHeight = ClockHeight / 4.5; 
            var HandWidth = ClockWidth / 4.5;
            var HandY = -7,
                HandX = -2.5,
                step = 0.06,
                currStep = 0,
                y = [],
                x = [],
                Y = [],
                X = [],
                Dy = [],
                Dx = [],
                DY = [],
                DX = [];
            var i;
    
            for (i = 0; i < n; i++) {
                y[i] = 0;
                x[i] = 0;
                Y[i] = 0;
                X[i] = 0;
            }
    
            for (i = 0; i < D.length; i++) {
                Dy[i] = 0;
                Dx[i] = 0;
                DY[i] = 0;
                DX[i] = 0;
            }
    
            var wrapper = $('clock');
            var html = ''
    
            // Date wrapper
            html = '';
            for (i = 0; i < D.length; i++) {
                html += '<div class="Date" name="Date" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props2 + D[i] + '</span></div>';
            }
            $('Od').children[0].innerHTML = html;
    
            // Face wrapper
            html = '';
            for (i = 0; i < n; i++) {
                html += '<div class="Face" name="Face" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props + Face[i] + '</span></div>';
            }
            $('Of').children[0].innerHTML = html;
    
            // Hours wrapper
            html = '';
            for (i = 0; i < H.length; i++) {
                html += '<div class="Hours" name="Hours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + hCol + ';text-align:center;font-weight:bold">' + H[i] + '</div>';
            } 
            $('Oh').children[0].innerHTML = html;
    
            // Minute wrapper
            html = '';
            for (i = 0; i < M.length; i++) {
                html += '<div class="Minutes" name="Minutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + mCol + ';text-align:center;font-weight:bold">' + M[i] + '</div>';
            } 
            $('Om').children[0].innerHTML = html;
    
            // Seconds wrapper
            html = '';
            for (i = 0; i < S.length; i++) {
                html += '<div class="Seconds" name="Seconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + sCol + ';text-align:center;font-weight:bold">' + S[i] + '</div>';
            } 
            $('Os').children[0].innerHTML = html;
    
            // Mouse move event handler
            function Mouse(evnt) {
                if (typeof evnt === 'undefined') {
                    ymouse = event.Y + ClockFromMouseY;
                    xmouse = event.X + ClockFromMouseX;
                } else {
                    ymouse = evnt.clientY + ClockFromMouseY;
                    xmouse = evnt.clientX + ClockFromMouseX;
                }
            }
    
            document.onmousemove = Mouse;
    
            function ClockAndAssign() {
                var time = new Date();
                var secs = time.getSeconds();
                var sec = -1.57 + Math.PI * secs / 30;
                var mins = time.getMinutes();
                var min = -1.57 + Math.PI * mins / 30;
                var hr = time.getHours();
                var hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes(), 10) / 360;
    
                $('Od').style.top = window.document.body.scrollTop;
                $('Of').style.top = window.document.body.scrollTop;
                $('Oh').style.top = window.document.body.scrollTop;
                $('Om').style.top = window.document.body.scrollTop;
                $('Os').style.top = window.document.body.scrollTop;
    
                for (i = 0; i < n; i++) {
                    var F = $$('Face')[i];
                    F.style.top = y[i] + ClockHeight * Math.sin(-1.0471 + i * Split * Math.PI / 180) + scrll;
                    F.style.left = x[i] + ClockWidth * Math.cos(-1.0471 + i * Split * Math.PI / 180);
                }
    
                for (i = 0; i < H.length; i++) {
                    var HL = $$('Hours')[i];
                    HL.style.top = y[i] + HandY + (i * HandHeight) * Math.sin(hrs) + scrll;
                    HL.style.left = x[i] + HandX + (i * HandWidth) * Math.cos(hrs);
                }
    
                for (i = 0; i < M.length; i++) {
                    var ML = $$('Minutes')[i].style;
                    ML.top = y[i] + HandY + (i * HandHeight) * Math.sin(min) + scrll;
                    ML.left = x[i] + HandX + (i * HandWidth) * Math.cos(min);
                }
    
                for (i = 0; i < S.length; i++) {
                    var SL = $$('Seconds')[i].style;
                    SL.top = y[i] + HandY + (i * HandHeight) * Math.sin(sec) + scrll;
                    SL.left = x[i] + HandX + (i * HandWidth) * Math.cos(sec);
                }
    
                for (i = 0; i < D.length; i++) {
                    var DL = $$('Date')[i].style;
                    DL.top = Dy[i] + ClockHeight * 1.5 * Math.sin(currStep + i * Dsplit * Math.PI / 180) + scrll;
                    DL.left = Dx[i] + ClockWidth * 1.5 * Math.cos(currStep + i * Dsplit * Math.PI / 180);
                }
                currStep -= step;
            }
    
            function Delay() {
                scrll = 0;
                Dy[0] = Math.round(DY[0] += ((ymouse) - DY[0]) * speed);
                Dx[0] = Math.round(DX[0] += ((xmouse) - DX[0]) * speed);
                for (i = 1; i < D.length; i++) {
                    Dy[i] = Math.round(DY[i] += (Dy[i - 1] - DY[i]) * speed);
                    Dx[i] = Math.round(DX[i] += (Dx[i - 1] - DX[i]) * speed);
                }
                y[0] = Math.round(Y[0] += ((ymouse) - Y[0]) * speed);
                x[0] = Math.round(X[0] += ((xmouse) - X[0]) * speed);
                for (i = 1; i < n; i++) {
                    y[i] = Math.round(Y[i] += (y[i - 1] - Y[i]) * speed);
                    x[i] = Math.round(X[i] += (x[i - 1] - X[i]) * speed);
                }
                ClockAndAssign();
                setTimeout(Delay, 20);
            }
            Delay();
        }());
    
        num = 1;
        function toggle() {
            num ^= 1; 
            if(num == 1){
                document.getElementById('clock').style.visibility="hidden";
                document.getElementById('clockCOLOR').disabled=true;
                document.getElementById('color1').disabled=true;
                document.getElementById('color2').disabled=true;
                document.getElementById('color3').disabled=true;
                document.getElementById('color4').disabled=true;
                document.getElementById('color5').disabled=true;
            } else {
                document.getElementById('clock').style.visibility="visible";
                document.getElementById('clockCOLOR').disabled=false;
                document.getElementById('color1').disabled=false;
                document.getElementById('color2').disabled=false;
                document.getElementById('color3').disabled=false;
                document.getElementById('color4').disabled=false;
                document.getElementById('color5').disabled=false;
            }
            document.getElementById("tog").value = num ?" REVIVE ":"KILL(切る)";
        }
        //-->
        </script>
    
        <div style="text-align:center;">
          <INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey 1px solid; 
          COLOR: black; BORDER-BOTTOM: grey 1px solid; FONT-FAMILY: ms gothic; BACKGROUND-COLOR: silver"
          onclick="bg1()" type="button" value="&#13;&#10;">
          <INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey 1px solid; 
          COLOR: black; BORDER-BOTTOM: grey 1px solid; FONT-FAMILY: ms gothic; BACKGROUND-COLOR: mediumblue"
          onclick="bg2()" type="button" value="&#13;&#10;">
          <INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey 1px solid; 
          COLOR: black; BORDER-BOTTOM: grey 1px solid; FONT-FAMILY: ms gothic; BACKGROUND-COLOR: black"
          onclick="bg3()" type="button" value="&#13;&#10;">
        </div>
        <br>
        <div style="text-align:center;">
          <select id="clockCOLOR" disabled>
            <option style="background-color:silver;font-weight:bold" onclick="clockCOLOR1()">Ｃ</option>
            <option style="background-color:mediumblue;font-weight:bold" onclick="clockCOLOR2()">Ｃ</option>
            <option style="background-color:black;font-weight:bold" onclick="clockCOLOR3()">Ｃ</option> 
          </select>
          <select id="color1" disabled>
            <option style="background-color:silver;font-weight:bold" onclick="Col11()">Ｄ</option>
            <option style="background-color:mediumblue;font-weight:bold" onclick="Col12()">Ｄ</option>
            <option style="background-color:black;font-weight:bold" onclick="Col13()">Ｄ</option>
          </select>
          <select id="color2" disabled>
            <option style="background-color:silver;font-weight:bold" onclick="Col21()">Ｆ</option>
            <option style="background-color:mediumblue;font-weight:bold" onclick="Col22()">Ｆ</option>
            <option style="background-color:black;font-weight:bold"  onclick="Col23()">Ｆ</option>
          </select>
          <select id="color3" disabled>
            <option style="background-color:silver;font-weight:bold" onclick="Col31()">Ｈ</option>
            <option style="background-color:mediumblue;font-weight:bold" onclick="Col32()">Ｈ</option>
            <option style="background-color:black;font-weight:bold" onclick="Col33()">Ｈ</option>
          </select>
          <select id="color4" disabled>
            <option style="background-color:silver;font-weight:bold" onclick="Col41()">Ｍ</option>
            <option style="background-color:mediumblue;font-weight:bold" onclick="Col42()">Ｍ</option>
            <option style="background-color:black;font-weight:bold" onclick="Col43()">Ｍ</option>
          </select>
          <select id="color5" disabled>
            <option style="background-color:silver;font-weight:bold" onclick="Col51()">Ｓ</option>
            <option style="background-color:mediumblue;font-weight:bold" onclick="Col52()">Ｓ</option>
            <option style="background-color:black;font-weight:bold" onclick="Col53()">Ｓ</option>
          </select>
          <input id="tog" class="butt" type="button" value="出現" onclick="toggle()">
        </div>
      </body>
    </html>
    
[/code]


CC BY-SA 3.0
2015-10-05T14:03:27.510
17288
2015-10-11T14:37:51.147
2015-10-06T00:20:44.357
3516
9359
question
javascript html
アナログ時計を消したら、好みに設定した色を初期の色に戻す方法


もう少しコードを削りシンプルな質問にした方が回答が得られやすいかと思います。  
時計の機能を削った物をコードスニペットとして付けましたので、参考にして下さい。

書き捨ての物ですので、グーバル変数の多用や、HTML中のコードの記述などよくない点が多いですが、以下の2点は参考になるかと思います。

  1. 色の変更を、`style.color` などで逐次指定するのではなくdata属性やクラスの切り替えで行なっている点  
今回は `data-theme` という属性を作り、これを切り替えています。  
`[data-theme="テーマ名"]`という形式のCSSセレクタで選択できますので、これにスタイルを当てます。

  2. 状態の更新を一箇所に集めている点  
時計のテーマと、select要素の状態（select要素自体のテーマ、選択されているoption要素）の更新は`set_theme`関数にまとめています。  
指定された時計の各要素にテーマを当てたあと、時計のテーマを各select要素に反映する処理が毎回確実に入ります。

[code]

    "use strict";
    var clock_parts = [$hour, $minute, $second];
    var clock_part_setters = [$hour_setter, $minute_setter, $second_setter];
    
    function for_each(array, func){ Array.prototype.forEach.call(array, func); }
    
    function get_theme(event){
     return event.target.options[event.target.selectedIndex].dataset.theme;
    }
    
    function select_option(select_elm, theme){
     select_elm.dataset.theme = theme;
       // IE hack
     select_elm.className = select_elm.className;
    
     for_each(select_elm.options, function(option_elm){
      if(option_elm.dataset.theme == theme){
       option_elm.selected = true;
      }
     });
    }
    
    function set_theme(elms, theme){
     for_each(elms, function(elm){
      elm.dataset.theme = theme;
      // IE hack
      elm.className = elm.className;
    
     });
    
     // update clock_part_setters
     for_each(clock_parts, function(part, i){
      select_option(clock_part_setters[i], part.dataset.theme);
     });
    
     // update $clock_setter
     var is_same_theme = clock_parts.every(function(part){
      return part.dataset.theme == clock_parts[0].dataset.theme;
     });
     if(is_same_theme){
      $clock_setter_none.hidden = true;
      select_option($clock_setter, clock_parts[0].dataset.theme);
     }
     else{
      $clock_setter_none.hidden = false;
      select_option($clock_setter, "white");
     }
    }
    
    function match_theme(){
     var theme_table = {
      // back_theme: "clock_theme",
      silver: "blue",
      blue: "black",
      black: "silver",
     };
     set_theme(clock_parts, theme_table[$back.dataset.theme]);
    }
[/code]

[code]

    [data-theme="silver"]{ color: black; background-color: silver; }
    [data-theme="blue"]{ color: white; background-color: blue; }
    [data-theme="black"]{ color: white; background-color: black; }
    [data-theme="white"]{ color: black; background-color: white; }
    
    #\$clock{ font-size: xx-large; }
[/code]

[code]

    <body id="$back" data-theme="silver">
     <div id="$clock">
      <span id="$hour" data-theme="blue">HH時</span>
      <span id="$minute" data-theme="blue">MM分</span>
      <span id="$second" data-theme="blue">SS秒</span>
     </div>
    
     <button onclick="$clock.hidden = !$clock.hidden; event.target.textContent = $clock.hidden ? 'Show' : 'Hide'; match_theme();"
       data-theme="white">
      Hide</button>
     <br />
    
     <button data-theme="silver" onclick="set_theme([$back], 'silver'); match_theme();">
      Silver</button>
     <button data-theme="blue" onclick="set_theme([$back], 'blue'); match_theme();">
      Blue</button>
     <button data-theme="black" onclick="set_theme([$back], 'black'); match_theme();">
      Black</button>
     <br />
    
     Clock:
     <select id="$clock_setter" data-theme="blue" autocomplete="off"
       onchange="set_theme(clock_parts, get_theme(event));">
      <option data-theme="silver"> Silver</option>
      <option data-theme="blue" selected> Blue </option>
      <option data-theme="black"> Black </option>
      <option id="$clock_setter_none" data-theme="white" hidden> --- </option>
     </select>
     Hour:
     <select id="$hour_setter" data-theme="blue" autocomplete="off"
       onchange="set_theme([$hour], get_theme(event));">
      <option data-theme="silver"> Silver </option>
      <option data-theme="blue" selected> Blue </option>
      <option data-theme="black"> Black </option>
     </select>
     Minute:
     <select id="$minute_setter" data-theme="blue" autocomplete="off"
       onchange="set_theme([$minute], get_theme(event));">
      <option data-theme="silver"> Silver </option>
      <option data-theme="blue" selected> Blue </option>
      <option data-theme="black"> Black </option>
     </select>
     Second:
     <select id="$second_setter" data-theme="blue" autocomplete="off"
       onchange="set_theme([$second], get_theme(event));">
      <option data-theme="silver"> Silver </option>
      <option data-theme="blue" selected> Blue </option>
      <option data-theme="black"> Black </option>
     </select>
    </body>
[/code]


CC BY-SA 3.0
2015-10-10T14:29:41.910
17505
2015-10-11T14:37:51.147
2015-10-11T14:37:51.147
3054
3054
17288
answer