• ベストアンサー

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]内の変数の増え方がどのようになっているのかが よくわからず困っています。 他にも別の記述方法はいろいろあると思うのですが、 できればこのプログラムを修正する形で御指摘いただきたいのですが。 どうぞよろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • arexis
  • ベストアンサー率66% (66/99)
回答No.2

■流れ <script language=javascript> <!-- aaa(); //--> </script> この時点ではaaa()は普通に『あ』をドキュメントに打ち出します。 次に aaa() が setTimeoutで呼ばれた時は、JavaScriptに関係なくドキュメント自体のロードは終わっています。この時点ではまだHTMLや関数はドキュメント内にあります。 『い』 を打ち出して、次の setTimoutが設定されます。 が、この時点で読込が終わったドキュメントに『い』を document.write() で打ち出してるので、このページ自体を書き換えてしまって、このページのソースは『い』 の文字のみだけになります。 HTML記述も関数も存在しない状態になります。 setTimeoutでさっき設定されたタイマーは、windowがあれば有効ですので、aaa() を呼ぼうとしますがドキュメントのソースは『い』 だけですので関数が無くてエラー。 って事のようです。 #1さんの書いたようにどこかのinnerHTMLや別ウィンドウを開いて書き出す必要がありますね。

casionet
質問者

お礼

なるほど！ document.writeはページを書き換えてしまうんですか！ 知らなかったです。だから関数が見つからないって エラーが出るんですね。 それを回避するのがinnerHTMLタグということですね。 非常にすっきりしました。 延々悩み続けていたので… 本当にありがとうございました。

その他の回答 (1)

  • ANASTASIAK
  • ベストアンサー率19% (658/3306)
回答No.1

関数の中の document.write(mozi[menu]); は、これではなく document.getElementById('test').innerHTML=(mozi[menu]); のように書きます。 それから <script language="javascript"> <!-- aaa(); //--> </script> のところの上に <span id="test"></span> と置きます(id名はお好きなもので可) そうすれば動くはずです。

casionet
質問者

お礼

動きました！感動しました… innerHTMLという指定が必要だったんですね。 全くわかりませんでした。 早急なご回答ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptのタイマーについて

    JavaScriptのタイマーについて上手く動作しないので質問させて頂きます。 ＜仕様＞ 　３秒後に「aaa」のメッセージを表示させる。 　５秒後に「aaa」のメッセージを表示させる。 ＜現在の状況＞ 　３秒後に「aaa」のメッセージを表示し、その後は応答なし。 ＜ソース＞ 以下を参照ください。何が悪いのでしょうか？ <HTML> <HEAD> <SCRIPT Language="JavaScript"> <!-- timerID = 10; function func() { alert("aaa"); } function init() { timerID = setTimeout("func()", 3000); timerID = setTimeout("func()", 5000); } // --> </SCRIPT> </HEAD> <BODY onload="init()"> </BODY> </HTML>

  • setTimeout()がうまくいきません

    以前、時計を一秒一秒、新しい絵を読み込んで バー表示型の時計を作ろうとしていた者ですが なんとか、１つの画像を連続表示させて 一本のバーにしていくスクリプトを 下記のように作りました そうしたところ、手動で更新をすると、うまく動作するのですが 自動で更新していこうと思いsetTimeout()を入れたのですが うまく動作してくれません。どのようにしたらよいのでしょうか <html> <head> <script language="JavaScript1.1"> <!-- function timesec() { var now = new Date() var s = now.getSeconds() var x = 60-s for(gj=0;gj<x;gj++) { var no = gj+1*x document.write("<img src='sec_1.gif' NAME='Name"+no+"'>") } } //--> </script> </head> <body> <script language="JavaScript1.1"> <!-- timesec() ----> </script> </body> </html>

  • setTimeoutあるいはsetIntervalの限界

    いつもお世話になっています。 タイマーの実験をしてみようかと思い、タイマー関数のサンプルをちょっと触ってみて、気になることがありました。 スクリプトとしては、次のようなものです。 <HTML> <HEAD> <SCRIPT Language="JavaScript"> <!-- timerID = 10; count = 0; function timerX(){ status = "Counter is " + count++; } function clr(){ clearInterval(timerID); } // --> </SCRIPT> <BODY bgColor="white" onLoad="timerID = setInterval('timerX()',1000);"> （以下略） このスクリプトを実行すると、1秒毎に1カウント増えていきますから、ステータスに表示される数値は10秒で10になります。 ですから、1を指定する、つまりsetInterval('timerX()',1);にすれば、論理上、10秒で10000になるはずですよね？ ところが実際にステータスに出る数値はそうはならず、かなり低い数字になってしまいます。 そこで質問なのですが、setTimeoutまたはsetIntervalでタイマーを作る場合、ミリ秒はどのくらいまで有効なのでしょうか。 ひょっとして、マシンに依存するのでまちまちなのでしょうか。 経験等でご存じの方、お教えください。

  • innerHTMLによるアニメーションGIFの表示について

    おたずねします。 ３つのアニメーションGIFを順に表示させて、最後まで行くと最初の画像に戻るように記述しました。 サンプルページURL http://oreryu.sakura.ne.jp/sample/gif_out.html IE6.0では問題ないのですが、Firefox2.0で表示すると、 2周目以降の表示がおかしくなります。 具体的には各アニメーションの最後のフレームが指定時間表示され、 次の画像に遷移するので、全くアニメーションが行われません。 また、どの画像で不具合が起こるかが限定されないようです。 ブラウザの問題かと思い、 キャッシュしない記述なども試しましたがうまくいきませんでした。 外部javascriptのソース banner= new Array(); banner[0]=('<a href="#"><img src="1-1.gif" alt="" width="375" height="125" border="0"></a>'); banner[1]=('<a href="#"><img src="2-1.gif" alt="" width="375" height="125" border="0"></a>'); banner[2]=('<a href="#"><img src="3-1.gif" alt="" width="375" height="125" border="0"></a>') time= new Array(); //バナーの表示時間　上から表示順 time[0]=(5000);　 time[1]=(5000);　 time[2]=(5000);　 var menu=0; function bchange(){ document.getElementById('banner_change').innerHTML=(banner[menu]); timerID = setTimeout("bchange()",time[menu]); if(menu == banner.length-1){ menu=0; }else{ menu++; } } HTMlファイルのソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script language="javascript" type="text/javascript" src="banner_chg.js"></script> </head> <body> <span id="banner_change"> <script language=javascript> <!-- bchange(); //--> </script> </span> </body> </html> できれば上記のinnerHTMLを使用してタグを書き換えるやり方で、 正常に表示できる方法を探しています。 御存知の方がいれば教えてください。 よろしくお願いいたします。

  • 画像が表示されないエラー

    ローカルで実行するとうまくいくのですが、サーバーにアップしてから見ると画像が表示されません。 おそらく、画像がＰＣにうまくアップされないのだと思います。 対策を教えてください。 <HTML><HEAD><TITLE>定時間ごとにランダムで画像を入れ替える</TITLE> <SCRIPT Language="JavaScript"> <!-- // 簡単JavaScript作成 // Imageの先読み function init(){ irekae1rdata = new Image() ; irekae2rdata = new Image() ; irekae3rdata = new Image() ; irekae1rdata.src = "pic/ansinkun1.gif" ; irekae2rdata.src = "pic/ansinkun2.gif" ; irekae3rdata.src = "pic/ansinkun3.gif" ; timerID = 0 ; timerID = setTimeout("irekae()",1000) ; } //一定時間ごとに画像を入れ替えてアニメーション function irekae() { switch(Math.floor(Math.random()*3)+1){ case 1: { document.irekaerimg.src=irekae1rdata.src ; timerID = setTimeout("irekae()",3*1000) ; break ; } case 2: { document.irekaerimg.src=irekae2rdata.src ; timerID = setTimeout("irekae()",3*1000) ; break ; } case 3: { document.irekaerimg.src=irekae3rdata.src ; timerID = setTimeout("irekae()",3*1000) ; break ; } } } // --> </SCRIPT> </HEAD> <BODY onload="init();"> <IMG SRC="./pic/ansinkun1.gif" NAME="irekaerimg" border="0"> </BODY></HTML>

  • setTimeoutを使った再帰

    初めて質問させて頂きます。 setTimeoutで呼び出してるか否かと、言う違いしか無いと、言う事を思いますが、次に挙げる2つのプログラムの動作が異なる理由をどなたかお教え頂けませんか? <script type="text/javascript"> <!-- var x; function FUNCTION1(){ x = 0; FUNCTION2(x); } function FUNCTION2(x){ if ( x < 10 ) { x++; window.alert(x); FUNCTION2(x); } } //--> </script> <body onload="javascript: FUNCTION1();"> ─────────────────────────── <script type="text/javascript"> <!-- var x; function FUNCTION1(){ x = 0; FUNCTION2(x); } function FUNCTION2(x){ if ( x < 10 ) { x++; window.alert(x); setTimeout("javascript: FUNCTION2(x);", 1000); } } //--> </script> <body onload="javascript: FUNCTION1();">

  • いくつか用意したフラッシュ（.swfファイル）を切り替え表示したい

    フラッシュで作成した.swfファイルをいくつか用意し、ホームページ上で切り替わるように表示したいのですが、どなたか詳しい方、教えていただけないでしょうか？ 画像の切り替えのソース（以下----部分）を利用してみたのですが、.jpgの部分を.swfに置き換えても、上手く表示されませんでした。 具体的に、ソースを記述していただけると、大変うれしいです。 都合のいい質問ですいません。 よろしくお願いします。 ------------------------------------------- <html> <head> <title></title> <script language="JavaScript"> <!-- var cnt = 0; var dat = new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg"); prLdImg= new Array(); for (i=0; i<dat.length; i++){ prLdImg[i] = new Image(); prLdImg[i].src = dat[i]; } function nextImg(){ var obj = window.document.all('myImg'); if(timerID){clearTimeout(timerID);} cnt++; cnt %= dat.length; obj.filters.revealTrans.Apply(); obj.src = dat[cnt]; obj.filters.revealTrans.Play(); var timerID = setTimeout("nextImg()",3000); } // --></script> </head> <body> <img id="myImg" src="img1.jpg" style="filter:revealTrans(duration=2,transition=12)" onClick="nextImg()"> </body> </html> -------------------------------------------

  • 一定時間がきたら表示を消したい

    window.statusを使用して、一定時間がきたら表示を消すように記述するにはどうすればよろしいでしょうか？ 以下にソースを記述しています。どなたか教えてください。 <head> <script language="javascript"> <!-- function a() { window.status=new Date().getHours()+"時"+new Date().getMinutes()+"分"+new Date().getSeconds()+"秒"; b=setTimeout("a()",500); } //--> </script> </head> <body onLoad="a()"> </body>

  • 一定時間がきたら表示を消すようにしたい

    window.statusを使用して、一定時間がきたら表示を消すように記述するにはどうすればよろしいでしょうか？ 以下にソースを記述しています。どなたか修正してください。 <head> <script language="javascript"> <!-- function a() { window.status=new Date().getHours()+"時"+new Date().getMinutes()+"分"+new Date().getSeconds()+"秒"; b=setTimeout("a()",500); } //--> </script> </head> <body onLoad="a()"> </body>

  • setTimeout関数の使用方法について

    はじめまして。 質問があります。 以下のコードを実行すると、一定時間おきに文字の表示が変化する ように動いてくれません。何が問題なのかがまったく見当がつき ません。どなたかご指摘をお願いします。 ---------------------------------------------------------------- <html> <head> <title>setTimeout()関数の使用例</title> </head> <body onLoad="timer=setTimeout('changeChar()',500)"> <script type="text/javascript"> <!-- var str = "abcdefghijklmnopqrstuvwxyz0123456789"; var cnt = 0; function changeChar() { clearTimeout(timer); ch = str.charAt(cnt++); document.write(ch); if(str.length > cnt) { timer = setTimeout("changeChar()",500); } } //--> </script> </body> </html> ----------------------------------------------------------------

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する