43927


下記のコードは、『(カレンダー機能付き)アナログ時計』のもので、1分おきに英語と日本語に  
切り替わります。  
このコードの"FACE(文字盤)の数字を、セレクトボックスで切り換えるようにしたいのですが、  
どのように書けばいいでしょうか。類似のコードでは、何通りかうまく行きましたが、こちらのコードでは、うまく行きません。よろしくお願いします。

[code]

        <!DOCTYPE html>
    <html>
    <head>
        <style>
            body {
                font-family: Helvetica, Arial, sans-serif;
            }
    
            .Face {
                position: absolute;
                height: 10;
                widdth: 10;
                text-align: center;
                font-size: 1em;
                color: #0000ff;
            }
    
            .Hours {
                position: absolute;
                width: 16px;
                height: 16px;
                font-family: Arial;
                font-size: 16px;
                color: #000000;
                text-align: center;
                font-weight: bold;
            }
    
            .Minutes {
                position: absolute;
                width: 16px;
                height: 16px;
                font-family: Arial;
                font-size: 16px;
                color: #000000;
                text-align: center;
                font-weight: bold;
            }
    
            .Seconds {
                position: absolute;
                width: 16px;
                height: 16px;
                font-family: Arial;
                font-size: 16px;
                color: #ff0000;
                text-align: center;
                font-weight: bold;
            }
    
            .Date {
                position: absolute;
                height: 10;
                width: 10;
                font-size: 1em;
                color: #00ff00;
            }
        </style>
        <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
    <body>
    
    <div id="clock">
        <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">
        "use strict";
    
        function $(sel) {
            return document.getElementById(sel);
        }
    
        function $$(sel) {
            return document.getElementsByClassName(sel);
        }
    
        function setPosition(element, y, x) {
            element.style.top = y + 'px';
            element.style.left = x + 'px';
        }
    
        var CLOCK_HEIGHT = 40,
            CLOCK_WIDTH = 40,
            CLOCK_FROM_MOUSE_Y = 0,
            CLOCK_FROM_MOUSE_X = 100;
    
        var H = '✴✴✴',
              H = H.split('');
        var M = '✴✴✴✴',
              M = M.split('');
        var S = '・・・・・',
            S = S.split('');
        var FACES =  '✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴',　
            SPEED = 0.2,
            FACES = FACES.split(' ');
        var HAND_HEIGHT = CLOCK_HEIGHT / 4.5;
        var HAND_WIDTH = CLOCK_WIDTH / 4.5;
        var HAND_Y = -7,
            HAND_X = -2.5,
            STEP = 0.06;
    
        var ymouse = 0,
            xmouse = 0;
        var currStep = 0;
        var lastBasePositions = [];
    
        function initialize() {
            for (var i = 0; i < FACES.length; ++i) {
                lastBasePositions[i] = {x:0, y:0};
            }
    
            var html = '';
            // Face wrapper
            html = '';
            for (var i = 0; i < FACES.length; ++i) {
                html += '<div class="Face">' + FACES[i] + '</div>';
            }
            $('Of').children[0].innerHTML = html;
    
            // Hours wrapper
            html = '';
            for (var i = 0; i < H.length; ++i) {
                html += '<div class="Hours">' + H[i] + '</div>';
            }
            $('Oh').children[0].innerHTML = html;
    
            // Minute wrapper
            html = '';
            for (var i = 0; i < M.length; ++i) {
                html += '<div class="Minutes">' + M[i] + '</div>';
            }
            $('Om').children[0].innerHTML = html;
    
            // Seconds wrapper
            html = '';
            for (var i = 0; i < S.length; ++i) {
                html += '<div class="Seconds">' + S[i] + '</div>';
            }
            $('Os').children[0].innerHTML = html;
    
            // Mouse move event handler
            document.onmousemove = function(evnt) {
                ymouse = evnt.clientY + CLOCK_FROM_MOUSE_Y;
                xmouse = evnt.clientX + CLOCK_FROM_MOUSE_X;
            };
    
            requestAnimationFrame(ClockAndAssign);
        }
    
        var lastYearPositions = [{x:0, y:0}];
        var lastYearString = ' ';
        var lastYearLocale = '';
        function updateYear(currentDate, scrll) {
            var yearString = lastYearString;
            if (currentDate.getMinutes() % 2 == 0) {
                if (lastYearLocale != 'ja')
                    yearString = currentDate.toLocaleDateString("ja-JP-u-ca-japanese", { era: "long", year: "numeric" }).
                    replace(/\u200e/g, "").replace(" ", "");
                lastYearLocale = 'ja';
            } else {
                if (lastYearLocale != 'en')
                    yearString = currentDate.toLocaleDateString("en-US", { era: "long", year: "numeric" }).
                    replace(/\u200e/g, "") + "年";
                lastYearLocale = 'en';
            }
    
            var yearLength = lastYearPositions.length;
            if (yearString != lastYearString) {
                lastYearString = yearString;
                var yearCharacters = yearString.split('');
                yearLength = yearCharacters.length;
    
                // Date wrapper
                var html = '';
                for (var i = 0; i < yearLength; ++i) {
                    html += '<div class="Date">' + yearCharacters[i] + '</div>';
                }
                $('Od').children[0].innerHTML = html;
            }
            var positions = [{}];
            var lastPosition = lastYearPositions[0];
            positions[0].y = lastPosition.y + ((ymouse) - lastPosition.y) * SPEED;
            positions[0].x = lastPosition.x + ((xmouse) - lastPosition.x) * SPEED;
            for (var i = 1; i < yearLength; ++i) {
                lastPosition = i < lastYearPositions.length ?
                    lastYearPositions[i] :
                    lastYearPositions[lastYearPositions.length - 1];
                positions[i] = {};
                positions[i].y = lastPosition.y + (positions[i-1].y - lastPosition.y) * SPEED;
                positions[i].x = lastPosition.x + (positions[i-1].x - lastPosition.x) * SPEED;
            }
            for (var i = 0; i < yearLength; ++i) {
                var radian = currStep + i * (360 / yearLength) * Math.PI / 180;
                setPosition($$('Date')[i],
                    Math.round(positions[i].y) + CLOCK_HEIGHT * 1.5 * Math.sin(radian) + scrll,
                    Math.round(positions[i].x) + CLOCK_WIDTH * 1.5 * Math.cos(radian));
            }
            lastYearPositions = positions;
            currStep -= STEP;
        }
    
    
        function ClockAndAssign() {
            var date = new Date();
            var secs = date.getSeconds();
            var sec = -1.57 + Math.PI * secs / 30;
            var mins = date.getMinutes();
            var min = -1.57 + Math.PI * mins / 30;
            var hr = date.getHours();
            var hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(date.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;
            var scrll = 0;
    
            var positions = [{}];
            var lastPosition = lastBasePositions[0];
            positions[0].y = (lastPosition.y + (ymouse - lastPosition.y) * SPEED);
            positions[0].x = (lastPosition.x + (xmouse - lastPosition.x) * SPEED);
            for (var i = 1; i < FACES.length; ++i) {
                lastPosition = lastBasePositions[i];
                positions[i] = {};
                positions[i].y = (lastPosition.y + (positions[i - 1].y - lastPosition.y) * SPEED);
                positions[i].x = (lastPosition.x + (positions[i - 1].x - lastPosition.x) * SPEED);
            }
            lastBasePositions = positions;
    
            var split = 360 / FACES.length;
            for (var i = 0; i < FACES.length; ++i) {
                var radian = -1.0471 + i * split * Math.PI / 180;
                setPosition($$('Face')[i],
                    positions[i].y + CLOCK_HEIGHT * Math.sin(radian) + scrll,
                    positions[i].x + CLOCK_WIDTH * Math.cos(radian));
            }
            for (var i = 0; i < H.length; ++i) {
                setPosition($$('Hours')[i],
                    positions[i].y + HAND_Y + (i * HAND_HEIGHT) * Math.sin(hrs) + scrll,
                    positions[i].x + HAND_X + (i * HAND_WIDTH) * Math.cos(hrs));
            }
            for (var i = 0; i < M.length; ++i) {
                setPosition($$('Minutes')[i],
                    positions[i].y + HAND_Y + (i * HAND_HEIGHT) * Math.sin(min) + scrll,
                    positions[i].x + HAND_X + (i * HAND_WIDTH) * Math.cos(min));
            }
            for (var i = 0; i < S.length; ++i) {
                setPosition($$('Seconds')[i],
                    positions[i].y + HAND_Y + (i * HAND_HEIGHT) * Math.sin(sec) + scrll,
                    positions[i].x + HAND_X + (i * HAND_WIDTH) * Math.cos(sec));
            }
            updateYear(date, scrll);
            requestAnimationFrame(ClockAndAssign);
        }
    
        initialize();
    
     function changeFace(){
    
       if(document.DateFace.changeFace.selectedIndex==0){
    
          FACES = '✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴';
           }
        else if(document.DateFace.changeFace.selectedIndex==1){
    
          FACES = '1 2 3 4 5 6 7 8 9 10 11 12';
           }
        else{
    
          FACES = 'Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ';
           }
    
          FACES = FACES.split(' ');
    
    
      // Face wrapper
      html = '';
      for (var i = 0; i < FACES.length; ++i) {
        html += '<div class="Face">' + FACES[i] + '</div>';
      }
      $('Of').children[0].innerHTML = html;
    }
    document.DateFace.changeFace.onchange=changeFace;
    
    </script>
    
    
     <form id ="DateFaceform" name="DateFace" style="text-align:CENTER;">
       <select id="faceSelector" name="changeFace" onChange="changeFace();">
          <option  selected disabled=disabled> 文字盤 </option>
          <option>アラビア数字</option>
          <option>ロマン数字</option>
       </select>
     </form>
    </body>
    </html>
    
[/code]

問題箇所は、下記の部分です。  
"FACES = FACES.split(' ');"と"// Face wrapper"の間に、  
何か書き足さなければならないようですが、分かる方は教えていただけないでしょうか。

[code]

     function changeFace(){
    
       if(document.DateFace.changeFace.selectedIndex==0){
    
          FACES = '✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴';
           }
        else if(document.DateFace.changeFace.selectedIndex==1){
    
          FACES = '1 2 3 4 5 6 7 8 9 10 11 12';
           }
        else{
    
          FACES = 'Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ';
           }
    
          FACES = FACES.split(' ');
    
    
      // Face wrapper
      html = '';
      for (var i = 0; i < FACES.length; ++i) {
        html += '<div class="Face">' + FACES[i] + '</div>';
      }
      $('Of').children[0].innerHTML = html;
    }
    document.DateFace.changeFace.onchange=changeFace;
    
[/code]


CC BY-SA 4.0
2018-05-11T13:52:05.823
43923
2018-05-11T20:41:00.183
28063
question
javascript
javascriptで作った時計の文字盤を、セレクトで切り換えるコードの書き方について


`changeFace()`
のロジックはそのままで問題ないようです。ブラウザの開発者ツールなどを開くと、コンソールにエラーが表示されているのではないかと思います。

  * `document.DateFace.changeFace.onchange=changeFace;`  
この行が実行される時点ではform要素とselect要素は存在しません。HTMLで`onChange`が書いてあるので、これは不要です。

  * form要素は必要ありません。削除して大丈夫です。

  * `<select ... onChange="changeFace();">`  
ここでselect要素を`changeFace()` に渡すと `changeFace()` の実装が少しシンプルになります。  
→ `<select ... onChange="changeFace(this);">`  
`function changeFace(){` → `function changeFace(select) {`  
`if(document.DateFace.changeFace.selectedIndex==...` →
`if(select.selectedIndex==...`

  * `html = '';`  
変数 html がこのスコープでは宣言されていません。  
→ `var html = '';`


CC BY-SA 4.0
2018-05-11T20:41:00.183
43927
2018-05-11T20:41:00.183
3475
43923
answer