このコード、どこが間違っていますか？

Question

function set()
{d = new Audio("do1.mp3");
  r = new Audio("re.mp3");
  m = new Audio("mi.mp3");
  arr = document.getElementById("input").value;
  test = setInterval(function()
  {if(arr[c]=="ド"){d.play();}if(arr[c]=="レ"){r.play();}if(arr[c]=="ミ"){m.play();};
   c++;
   if(c>arr.length){clearInterval(test);}},1000);
}

動かないのですが、どこが間違っているのかわかりません…

Comments

[Zuishin]

動かないときにはエラーメッセージを読んでください。

[naomi3]

HTMLをつけ、何をやりたいのか（目的）を教えてください。

[kyoya0819]

間違えてるから動かないんです。

[kei344]

期待している動作を明示した上で、「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

Answer 1

#「どこ」じゃない。「あちこち」間違ってます

ソースは可読性の高い様式に直して読んでみる

function set(){
  let c = 0                              // カウンタが無い
  , d = new Audio("do1.mp3")
  , r = new Audio("re.mp3")
  , m = new Audio("mi.mp3")
  //, arr = document.getElementById("input").value // str がふさわしい
  , str = document.getElementById("input").value
  , test = setInterval(function(){
      //if(arr[c]=="ド"){ d.play(); }
      if(str.charAt(c)=="ド"){ d.play(); }
      //if(arr[c]=="レ"){ r.play(); }
      if(str.charAt(c)=="レ"){ r.play(); }
      //if(arr[c]=="ミ"){ m.play(); };
      if(str.charAt(c)=="ミ"){ m.play(); };
      c++;                               // void 0 = (void 0)++
      //if(c>arr.length){                // 範囲は 0 から length-1
      if(c==str.length){
        clearInterval(test);
      }
    }, 1000)
  ;
}

１）カウンタ利用する変数 c が初期化されていません

void をインクリメントしても void です。
c の追記だけでも、意図した再生に近づけます。

２）文字列処理を理解できていますか？

arr じゃなく、str のほうが可読性が高い。
あと、配列添字形式じゃなく、 charAt()

３）c>length はありえない

length を取りうるものは 0 から始まります。

４）関数トリガとなるDOMが明示されていない。

<input id="input" placeholder="ド,レ,ミ を任意の順で３文字入力">
<button onclick="set()">再生</button>

５）ほかもJavaScriptの基本を理解しているか疑問を感じる

• 変数の型
• document.getElementById()
• setInterval()
• DOM の value プロパティの意味
• etc..

とりあえず、辞書のように使えるこれ 改定第5版 ポケットリファレンス 。必携ですよ。

Answer 2

デバッグしてください。
プログラマ, SEは自分で修正できなければ(仕事レベルでは)存在価値がないです。
学者なのに思考停止する人、需要があると思いますか?

デバッグする方法はブラウザによって違いますが、例えばFirefoxなら
Firefox デバッグモードとかがあります。

IEならIE デバッグモードとかでしょうか。

「ブラウザ名 "デバッグモード"」とか「ブラウザ名 "デバッガ"」とかで検索してみてください。

こういうのを使えば、使い方によっては「どこまで読み込まれて、どこでエラーが発生しているのか」とかがわかります。

怪しいのは arr[c] とかの c の部分。
多分、デバッガ使ってやるか、いわゆるprintfデバッグっていう方法 ( JavaScript なら alert関数とか で ) で、例えば alert( c ) とやってみてください。
たぶん、undefined とかになっている可能性が高いです。

もしそれであれば、

arr[c] とかのように使う前に

var c = 0;

とやってみてください。

JavaScriptでは変数宣言は不要ですが、宣言(および初期化)がないと undefined だったかな。
空の状態になるようです。

次に怪しいのは

arr = document.getElementById("input").value;

の部分。

inputっていうidはちゃんとありますか?

HTMLが記載されていないので、怪しく感じます。

あるいは、単に set関数が呼ばれていないとか。

ほかの方々が指摘されているように、

1. 必要な情報( 言語名, ライブラリ名, OSバージョン etc. ) を提示すること
2. 試したこと(検索も含め)を記述すること
3. 関係のあるコードを(できる限り)すべて提示すること
4. 期待している結果と実際の結果を比較できるようにすること
5. (質問する前に)デバッグしたりして問題解決に臨むこと

これらをすべてやれば、それだけでも「丸投げ」には見えません。

まずは、デバッグをしてください。

Answer 3

気がついたところだけなのですが、変数arrは配列にならないことと、cが宣言されてないことです。
複数同じclass名を付けて、
getElementsByClassNameメソッドを使うと、クラス名分の、配列が返ってきます。

Comments

[thyda.eiqau]

「getElementsByClassNameメソッドを使うと、クラス名分の、配列が返ってきます。」という表現は危険だと思います。伝わりやすさを優先して配列という言葉を使っているのかもしれませんが、返ってくるのは配列風オブジェクトであって配列ではありません

[ryuii]

間違えました。HTMLコレクションですね。

Answer 4

文法エラーは無いので、動くはずです。
期待通りの動きをするかどうかはまた別の話ですが。

関数を定義しただけで呼び出していないというオチではないですよね？