繰り返して変数値を変化させた結果を表示する方法

変数 calling_Str に初期の文字列をセットし
while の中で
calling_str に * を追加していき
繰り返している間だんだんに増えていく状態を表示したいのですが
うまくいきません。
innerHTMLにしてもうまくいきませんでした。

教えてください

javascript 部分

var calling_str="最初の文字列";

	while (callflag===1) {
		calling_str += '*';
		document.getElementById("calling").text = calling_str;

// document.getElementById("calling").innerHTML = calling_str;
}

<html>部分

<div class="calling">
</div>

行動規範の内容に同意します

回答3件

参考情報:

JavaScript入門一定時間で繰り返す（setTimeout） http://www.pori2.net/js/timer/2.html

次のように書いてみました。
質問文にあった、while ループの実行部分では、while を抜けたときの状態だけが、画面表示されてしまいます。
show() という関数を定義し、それを呼び出すようにしました。この場合は、1 秒ごとに画面が更新されていきます。

lang
1<html>
2  <head></head>
3  <body>
4    <div id="calling"></div>
5
6    <script type="text/javascript">
7      <!--
8          var calling_str="最初の文字列";
9          var callflag = 4;
10
11          while (callflag > 0) {
12            callflag -= 1;
13            calling_str += '*';
14            document.getElementById("calling").innerHTML = calling_str;
15            console.log(" 0 " + calling_str);
16          }
17
18          function show() {
19            callflag -= 1;
20            calling_str += '*';
21            document.getElementById("calling").innerHTML = calling_str;
22            console.log(" show " + calling_str);
23
24            if (callflag > 0) {
25              setTimeout(function() {
26                show();
27              }, 1000);
28            }
29          }
30
31          calling_str += '';
32          callflag = 10;
33          show();
34      //-->
35    </script>
36  </body>
37</html>

投稿2015/02/15 12:56

katoy

総合スコア22324

it_solution_lab

2015/02/16 01:17

色々ありがとうございます。質問の仕方が悪かったですね。繰り返しの方法を知りたいのではなく、 javascript で得られた変数を html 内の任意の位置に、画面遷移なしに、表示したい、ということです。ですので、結果をalert で出す、とか　show で console.log でなく <div>で出すのが一般的かなと考えたのですが、うまくいかなかったので質問した次第です。

katoy

2015/02/16 15:10

上のコードの show() の中で calling_str += '*'; document.getElementById("calling").innerHTML = calling_str; を実行しており、画面遷移なしに "*" の長さが一秒毎に伸びていくことがみれるはずです。

行動規範の内容に同意します

細かく見ていませんが、この部分を

lang
1 <div class="calling"> 
2    </div>

こうしたらどうなりますか？

lang
1 <div id="calling"> 
2    </div>

getElementByIdはその名の通りidに対して作用する物です。

投稿2015/02/15 06:19

munyaX

総合スコア783

it_solution_lab

2015/02/15 07:00

だめでした

munyaX

2015/02/15 07:44

ダメだったというのは > これだと、最後のすべてが連結した状態のみ表示されこれですか？ setInterval()を使って下さい。 http://lifelog.main.jp/wordpress/?p=536

it_solution_lab

2015/02/16 01:13

div class を div id に変えてもダメでした、ということです。最後のすべてが連結した状態のみ・・・というのは、下のいただいたコメントに対してやってみたけど、結果しか出なかったということでループがすべて終わってから alert になったような感じでした。 alert で出したいのではなく、順々に　html 内に表示される手法ととりたく setInterval で何度も実行されるのはよいのですが、そうではなくて javascript で得られた変数値（文字列）を html 内に　任意の場所にテキストを表示するための記述方法がわからない、ということです。

行動規範の内容に同意します

おそらくやり方自体はあってるのだと思います。
では、私の所感では、

innerHTMLは、classではなく、id要素を探すのではなかったかな？
ということと、

innerHTMLでidを検索する場合、そのidがinnnerHTMLより上にないといけなかったのではないかな？
ということです。

それぞれを考慮し、以下のようにすると動きました。

callflagは、とりあえず適当に定義しています。

lang
1<html>
2<head></head>
3<body>
4<div id="calling"></div>
5
6
7<script type="text/javascript">
8<!--
9var calling_str="最初の文字列";
10var callflag = -10;
11
12while (callflag != 1) {
13	calling_str += '*';
14	document.getElementById("calling").innerHTML = calling_str;
15	
16	callflag += 1;
17} 
18
19alert(calling_str);
20//-->
21</script>
22</body>
23</html>