QA@IT
«回答へ戻る

質問者様が自己解決していることに気づかず回答してしまったためその旨追記しました

20
+// 追記
+
+質問者様自身で解決済みでしたね。
+更新しておらず気が付きませんでした。失礼しました。
+
+// 追記ここまで
+
 動かしてみてびっくりしました。普通の時計かと思ったらとてもきれいな動きをするんですね。
 結構時間がたっていますのでもう解決しているかもしれませんが回答します。
 

// 追記

質問者様自身で解決済みでしたね。
更新しておらず気が付きませんでした。失礼しました。

// 追記ここまで

動かしてみてびっくりしました。普通の時計かと思ったらとてもきれいな動きをするんですね。
結構時間がたっていますのでもう解決しているかもしれませんが回答します。

見出し

以下の順序で回答します。

  1. 動作させるための修正案
  2. 質問者様のコードが動作しなかった理由
  3. 私の問題解決手順

1.動作させるための修正案(一例)

一番変更が少ないと思われる方法です。ソースの読みやすさなどはあまり考慮していません。

変更前

JavaScript(修正箇所のみ抜粋)

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;

html(修正箇所のみ抜粋)

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

変更後

JavaScript(修正箇所のみ抜粋)

/* changeFace -> doChangeFaceに変更 */
function doChangeFace() {
  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
  /* use strictを使用している場合暗黙の宣言はできない
     明示的に変数として宣言 */
  var html = '';
  for (var i = 0; i < FACES.length; ++i) {
    html += '<div class="Face">' + FACES[i] + '</div>';
  }
  $('Of').children[0].innerHTML = html;
}
/* htmlで指定したonChangeと効果が重複するためコメントアウト */
// document.DateFace.changeFace.onchange=changeFace;

html(修正箇所のみ抜粋)

<form id ="DateFaceform" name="DateFace" style="text-align:CENTER;">
  <!-- changeFace関数の名称を変更したのでonChangeで呼び出す関数名も合わせて 変更 -->
  <select id="faceSelector" name="changeFace" onChange="doChangeFace(); ">
    <option selected disabled=disabled> 文字盤 </option>
    <option>アラビア数字</option>
    <option>ロマン数字</option>
  </select>
</form>

変更箇所

  1. changeFace() 関数の名前を doChangeFace() に変更
  2. 2. 1の変更に合わせて onChange="changeFace();"onChange="doChangeFace();" に変更
  3. 3. 変数 html が宣言されていなかったため宣言

2.質問者様のコードが動作しなかった理由

理由1 : changeFace()関数がnameのchangeFaceと誤認識されていた

JavaScript内部の細かい動きまでは理解できていないのですが、
関数のchangeFace()とselect要素につけたchangeFaceで名称がかぶっており、select要素のchangeFaceを指定したと判断されてしまっていたようです。
changeFaceは関数ではないため実行できない」というエラーが出ていました。
複数の要素、関数に対して同じ名称は用いないほうがいいと思います。

理由2 : 変数htmlが宣言されておらずエラーになっていた

(こちらは質問者様のJavaScriptに対する理解度が分からず、書き漏れなのかuse strictの仕様を勘違いしていたのかinitialize()で宣言済みの為宣言不要と判断したのか分からないため一通り書きます。)

use strictを使用すると厳格モードとなり記述ルールがより厳しくなります。
変数も(var,letなどを用いて)明示的に宣言しなければエラーとなり、使用できなくなります(use strict未指定時は暗黙でグローバル変数として宣言されます)。use strict参考リンク(msdn)

html変数はinitialize()関数内でvar htmlという記載で宣言されていますが、これはinitialize()関数内でのみ有効な変数として宣言されます。全体で利用できるようにするにはH,M,SPEEDなどの変数のように一番外側?で宣言する必要があります。
ただ今回のhtmlは使いまわす必要がある変数ではないと思いますので、関数内の必要なタイミングで宣言する形で問題ないと思います。

3. 私の問題解決手順

(このざっくりとした記載で役立つかは分かりませんが)私が原因を見つけるまでの手順を記載しておきます。

  1. とりあえずplunkerのエディタに提示いただいているソースを全て貼り付け、動かしてみました(ブラウザはChromeを使用)
  2. Chromeのデベロッパーツールにてコンソールを開き、表示されているエラーを確認しながら原因を探しました。(changeFace is not functionhtml is not definedという分かりやすいエラーの出方だったので、比較的原因究明しやすかったです。)

JavaScriptはちゃんとエラーが出ますのでデベロッパーツールなどを用いて確認しながら実装すれば、期待した動作にならない場合の対処もしやすいのではないかと思います。

以上参考になれば幸いです。

// 追記

質問者様自身で解決済みでしたね。
更新しておらず気が付きませんでした。失礼しました。

// 追記ここまで

動かしてみてびっくりしました。普通の時計かと思ったらとてもきれいな動きをするんですね。
結構時間がたっていますのでもう解決しているかもしれませんが回答します。

## 見出し
以下の順序で回答します。

1. 動作させるための修正案
2. 質問者様のコードが動作しなかった理由
3. 私の問題解決手順

## 1.動作させるための修正案(一例)

一番変更が少ないと思われる方法です。ソースの読みやすさなどはあまり考慮していません。

### 変更前

JavaScript(修正箇所のみ抜粋)

``` javascript
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;
```

html(修正箇所のみ抜粋)
``` html
<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>
```

### 変更後
JavaScript(修正箇所のみ抜粋)
``` javascript
/* changeFace -> doChangeFaceに変更 */
function doChangeFace() {
  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
  /* use strictを使用している場合暗黙の宣言はできない
     明示的に変数として宣言 */
  var html = '';
  for (var i = 0; i < FACES.length; ++i) {
    html += '<div class="Face">' + FACES[i] + '</div>';
  }
  $('Of').children[0].innerHTML = html;
}
/* htmlで指定したonChangeと効果が重複するためコメントアウト */
// document.DateFace.changeFace.onchange=changeFace;
```

html(修正箇所のみ抜粋)
``` html
<form id ="DateFaceform" name="DateFace" style="text-align:CENTER;">
  <!-- changeFace関数の名称を変更したのでonChangeで呼び出す関数名も合わせて 変更 -->
  <select id="faceSelector" name="changeFace" onChange="doChangeFace(); ">
    <option selected disabled=disabled> 文字盤 </option>
    <option>アラビア数字</option>
    <option>ロマン数字</option>
  </select>
</form>
```

### 変更箇所

1. changeFace() 関数の名前を doChangeFace() に変更
2. 2. 1の変更に合わせて `onChange="changeFace();"` も `onChange="doChangeFace();"` に変更
3. 3. 変数 html が宣言されていなかったため宣言

## 2.質問者様のコードが動作しなかった理由

### 理由1 : changeFace()関数がnameのchangeFaceと誤認識されていた

JavaScript内部の細かい動きまでは理解できていないのですが、
関数の`changeFace()`とselect要素につけた`changeFace`で名称がかぶっており、select要素の`changeFace`を指定したと判断されてしまっていたようです。
「`changeFace`は関数ではないため実行できない」というエラーが出ていました。
複数の要素、関数に対して同じ名称は用いないほうがいいと思います。

### 理由2 : 変数`html`が宣言されておらずエラーになっていた

(こちらは質問者様のJavaScriptに対する理解度が分からず、書き漏れなのか`use strict`の仕様を勘違いしていたのか`initialize()`で宣言済みの為宣言不要と判断したのか分からないため一通り書きます。)

`use strict`を使用すると厳格モードとなり記述ルールがより厳しくなります。
変数も(`var`,`let`などを用いて)明示的に宣言しなければエラーとなり、使用できなくなります(`use strict`未指定時は暗黙でグローバル変数として宣言されます)。[use strict参考リンク(msdn)](https://msdn.microsoft.com/ja-jp/library/br230269(v=vs.94).aspx)

`html`変数は`initialize()`関数内で`var html`という記載で宣言されていますが、これは`initialize()`関数内でのみ有効な変数として宣言されます。全体で利用できるようにするには`H`,`M`,`SPEED`などの変数のように一番外側?で宣言する必要があります。
ただ今回の`html`は使いまわす必要がある変数ではないと思いますので、関数内の必要なタイミングで宣言する形で問題ないと思います。

## 3. 私の問題解決手順

(このざっくりとした記載で役立つかは分かりませんが)私が原因を見つけるまでの手順を記載しておきます。

1. とりあえず[plunker](https://plnkr.co/)のエディタに提示いただいているソースを全て貼り付け、動かしてみました(ブラウザはChromeを使用)
2. Chromeのデベロッパーツールにてコンソールを開き、表示されているエラーを確認しながら原因を探しました。(`changeFace is not function`と`html is not defined`という分かりやすいエラーの出方だったので、比較的原因究明しやすかったです。)

JavaScriptはちゃんとエラーが出ますのでデベロッパーツールなどを用いて確認しながら実装すれば、期待した動作にならない場合の対処もしやすいのではないかと思います。

以上参考になれば幸いです。

回答を投稿

動かしてみてびっくりしました。普通の時計かと思ったらとてもきれいな動きをするんですね。
結構時間がたっていますのでもう解決しているかもしれませんが回答します。

見出し

以下の順序で回答します。

  1. 動作させるための修正案
  2. 質問者様のコードが動作しなかった理由
  3. 私の問題解決手順

1.動作させるための修正案(一例)

一番変更が少ないと思われる方法です。ソースの読みやすさなどはあまり考慮していません。

変更前

JavaScript(修正箇所のみ抜粋)

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;

html(修正箇所のみ抜粋)

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

変更後

JavaScript(修正箇所のみ抜粋)

/* changeFace -> doChangeFaceに変更 */
function doChangeFace() {
  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
  /* use strictを使用している場合暗黙の宣言はできない
     明示的に変数として宣言 */
  var html = '';
  for (var i = 0; i < FACES.length; ++i) {
    html += '<div class="Face">' + FACES[i] + '</div>';
  }
  $('Of').children[0].innerHTML = html;
}
/* htmlで指定したonChangeと効果が重複するためコメントアウト */
// document.DateFace.changeFace.onchange=changeFace;

html(修正箇所のみ抜粋)

<form id ="DateFaceform" name="DateFace" style="text-align:CENTER;">
  <!-- changeFace関数の名称を変更したのでonChangeで呼び出す関数名も合わせて 変更 -->
  <select id="faceSelector" name="changeFace" onChange="doChangeFace(); ">
    <option selected disabled=disabled> 文字盤 </option>
    <option>アラビア数字</option>
    <option>ロマン数字</option>
  </select>
</form>

変更箇所

  1. changeFace() 関数の名前を doChangeFace() に変更
  2. 2. 1の変更に合わせて onChange="changeFace();"onChange="doChangeFace();" に変更
  3. 3. 変数 html が宣言されていなかったため宣言

2.質問者様のコードが動作しなかった理由

理由1 : changeFace()関数がnameのchangeFaceと誤認識されていた

JavaScript内部の細かい動きまでは理解できていないのですが、
関数のchangeFace()とselect要素につけたchangeFaceで名称がかぶっており、select要素のchangeFaceを指定したと判断されてしまっていたようです。
changeFaceは関数ではないため実行できない」というエラーが出ていました。
複数の要素、関数に対して同じ名称は用いないほうがいいと思います。

理由2 : 変数htmlが宣言されておらずエラーになっていた

(こちらは質問者様のJavaScriptに対する理解度が分からず、書き漏れなのかuse strictの仕様を勘違いしていたのかinitialize()で宣言済みの為宣言不要と判断したのか分からないため一通り書きます。)

use strictを使用すると厳格モードとなり記述ルールがより厳しくなります。
変数も(var,letなどを用いて)明示的に宣言しなければエラーとなり、使用できなくなります(use strict未指定時は暗黙でグローバル変数として宣言されます)。use strict参考リンク(msdn)

html変数はinitialize()関数内でvar htmlという記載で宣言されていますが、これはinitialize()関数内でのみ有効な変数として宣言されます。全体で利用できるようにするにはH,M,SPEEDなどの変数のように一番外側?で宣言する必要があります。
ただ今回のhtmlは使いまわす必要がある変数ではないと思いますので、関数内の必要なタイミングで宣言する形で問題ないと思います。

3. 私の問題解決手順

(このざっくりとした記載で役立つかは分かりませんが)私が原因を見つけるまでの手順を記載しておきます。

  1. とりあえずplunkerのエディタに提示いただいているソースを全て貼り付け、動かしてみました(ブラウザはChromeを使用)
  2. Chromeのデベロッパーツールにてコンソールを開き、表示されているエラーを確認しながら原因を探しました。(changeFace is not functionhtml is not definedという分かりやすいエラーの出方だったので、比較的原因究明しやすかったです。)

JavaScriptはちゃんとエラーが出ますのでデベロッパーツールなどを用いて確認しながら実装すれば、期待した動作にならない場合の対処もしやすいのではないかと思います。

以上参考になれば幸いです。

動かしてみてびっくりしました。普通の時計かと思ったらとてもきれいな動きをするんですね。
結構時間がたっていますのでもう解決しているかもしれませんが回答します。

## 見出し
以下の順序で回答します。

1. 動作させるための修正案
2. 質問者様のコードが動作しなかった理由
3. 私の問題解決手順

## 1.動作させるための修正案(一例)

一番変更が少ないと思われる方法です。ソースの読みやすさなどはあまり考慮していません。

### 変更前

JavaScript(修正箇所のみ抜粋)

``` javascript
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;
```

html(修正箇所のみ抜粋)
``` html
<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>
```

### 変更後
JavaScript(修正箇所のみ抜粋)
``` javascript
/* changeFace -> doChangeFaceに変更 */
function doChangeFace() {
  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
  /* use strictを使用している場合暗黙の宣言はできない
     明示的に変数として宣言 */
  var html = '';
  for (var i = 0; i < FACES.length; ++i) {
    html += '<div class="Face">' + FACES[i] + '</div>';
  }
  $('Of').children[0].innerHTML = html;
}
/* htmlで指定したonChangeと効果が重複するためコメントアウト */
// document.DateFace.changeFace.onchange=changeFace;
```

html(修正箇所のみ抜粋)
``` html
<form id ="DateFaceform" name="DateFace" style="text-align:CENTER;">
  <!-- changeFace関数の名称を変更したのでonChangeで呼び出す関数名も合わせて 変更 -->
  <select id="faceSelector" name="changeFace" onChange="doChangeFace(); ">
    <option selected disabled=disabled> 文字盤 </option>
    <option>アラビア数字</option>
    <option>ロマン数字</option>
  </select>
</form>
```

### 変更箇所

1. changeFace() 関数の名前を doChangeFace() に変更
2. 2. 1の変更に合わせて `onChange="changeFace();"` も `onChange="doChangeFace();"` に変更
3. 3. 変数 html が宣言されていなかったため宣言

## 2.質問者様のコードが動作しなかった理由

### 理由1 : changeFace()関数がnameのchangeFaceと誤認識されていた

JavaScript内部の細かい動きまでは理解できていないのですが、
関数の`changeFace()`とselect要素につけた`changeFace`で名称がかぶっており、select要素の`changeFace`を指定したと判断されてしまっていたようです。
「`changeFace`は関数ではないため実行できない」というエラーが出ていました。
複数の要素、関数に対して同じ名称は用いないほうがいいと思います。

### 理由2 : 変数`html`が宣言されておらずエラーになっていた

(こちらは質問者様のJavaScriptに対する理解度が分からず、書き漏れなのか`use strict`の仕様を勘違いしていたのか`initialize()`で宣言済みの為宣言不要と判断したのか分からないため一通り書きます。)

`use strict`を使用すると厳格モードとなり記述ルールがより厳しくなります。
変数も(`var`,`let`などを用いて)明示的に宣言しなければエラーとなり、使用できなくなります(`use strict`未指定時は暗黙でグローバル変数として宣言されます)。[use strict参考リンク(msdn)](https://msdn.microsoft.com/ja-jp/library/br230269(v=vs.94).aspx)

`html`変数は`initialize()`関数内で`var html`という記載で宣言されていますが、これは`initialize()`関数内でのみ有効な変数として宣言されます。全体で利用できるようにするには`H`,`M`,`SPEED`などの変数のように一番外側?で宣言する必要があります。
ただ今回の`html`は使いまわす必要がある変数ではないと思いますので、関数内の必要なタイミングで宣言する形で問題ないと思います。

## 3. 私の問題解決手順

(このざっくりとした記載で役立つかは分かりませんが)私が原因を見つけるまでの手順を記載しておきます。

1. とりあえず[plunker](https://plnkr.co/)のエディタに提示いただいているソースを全て貼り付け、動かしてみました(ブラウザはChromeを使用)
2. Chromeのデベロッパーツールにてコンソールを開き、表示されているエラーを確認しながら原因を探しました。(`changeFace is not function`と`html is not defined`という分かりやすいエラーの出方だったので、比較的原因究明しやすかったです。)

JavaScriptはちゃんとエラーが出ますのでデベロッパーツールなどを用いて確認しながら実装すれば、期待した動作にならない場合の対処もしやすいのではないかと思います。

以上参考になれば幸いです。