- ベストアンサー
setTimeoutを使用して文字を表示させたい
おたずねします。 まだまだ初心者で、練習用に以下のようなプログラムを書いたのですが、うまく動きません。 やりたいことは「あいうえお」の文字を順番に、規定の時間（1秒ずつ表示時間を長くして）表示させるものです。 <script language="javascript"> mozi= new Array(); mozi[0]=("あ"); mozi[1]=("い"); mozi[2]=("う"); mozi[3]=("え"); mozi[4]=("お"); time= new Array(); time[0]=(1000); time[1]=(2000); time[2]=(3000); time[3]=(4000); time[4]=(5000); var menu=0; function aaa(){ document.write(mozi[menu]); timerID = setTimeout("aaa()",time[menu]); if(menu == mozi.length-1){ menu=0; }else{ menu++; } } </script> <body> <script language=javascript> <!-- aaa(); //--> </script> </body> どうしても「あ」→「い」のあとで動作がループのように固まってしまします。 このプログラムの順番がどのように動いて、 [menu]内の変数の増え方がどのようになっているのかが よくわからず困っています。 他にも別の記述方法はいろいろあると思うのですが、 できればこのプログラムを修正する形で御指摘いただきたいのですが。 どうぞよろしくお願いいたします。
- casionet
- お礼率90% (39/43)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
■流れ <script language=javascript> <!-- aaa(); //--> </script> この時点ではaaa()は普通に『あ』をドキュメントに打ち出します。 次に aaa() が setTimeoutで呼ばれた時は、JavaScriptに関係なくドキュメント自体のロードは終わっています。この時点ではまだHTMLや関数はドキュメント内にあります。 『い』 を打ち出して、次の setTimoutが設定されます。 が、この時点で読込が終わったドキュメントに『い』を document.write() で打ち出してるので、このページ自体を書き換えてしまって、このページのソースは『い』 の文字のみだけになります。 HTML記述も関数も存在しない状態になります。 setTimeoutでさっき設定されたタイマーは、windowがあれば有効ですので、aaa() を呼ぼうとしますがドキュメントのソースは『い』 だけですので関数が無くてエラー。 って事のようです。 #1さんの書いたようにどこかのinnerHTMLや別ウィンドウを開いて書き出す必要がありますね。
その他の回答 (1)
- ANASTASIAK
- ベストアンサー率19% (658/3306)
関数の中の document.write(mozi[menu]); は、これではなく document.getElementById('test').innerHTML=(mozi[menu]); のように書きます。 それから <script language="javascript"> <!-- aaa(); //--> </script> のところの上に <span id="test"></span> と置きます(id名はお好きなもので可) そうすれば動くはずです。
お礼
動きました！感動しました… innerHTMLという指定が必要だったんですね。 全くわかりませんでした。 早急なご回答ありがとうございました。
お礼
なるほど！ document.writeはページを書き換えてしまうんですか！ 知らなかったです。だから関数が見つからないって エラーが出るんですね。 それを回避するのがinnerHTMLタグということですね。 非常にすっきりしました。 延々悩み続けていたので… 本当にありがとうございました。