質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

5回答

16439閲覧

【JavaScript】for文の結果を1つずつ出力したい

umauman

総合スコア57

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2017/04/26 11:35

###前提・実現したいこと
forで繰り返した処理を1つずつHTMLページの任意の場所に表示させたいですが、ループの一番最後の結果しか表示がされません。
すべて表示するにはどのように記述をすべきなのでしょうか?

html

1<p id="render"></p> 2 3<!--body閉じタグの前で外部JSファイルを読み込み--> 4<script src="js/script.js"></script>

###希望する表示

html

1<p id="render"> 20<br> 31<br> 42<br> 53<br> 64<br> 7</p>

###期待しない表示(これになってしまいます)

html

1<p id="result"> 24<br> 3</p>

###試した記述
いずれも「期待しない表示」になってしまいます。

#####NGだった記述その①

javascript

1for (var i = 0; i < 5; i++) { 2 document.getElementById('render').innerHTML = i + '<br>'; 3}

#####NGだった記述その②

javascript

1var result = 0; 2for (var i = 0; i < 5; i++) { 3 result = i + '<br>'; 4} 5document.getElementById('render').innerHTML = result;

例えばdocument.writeを使用すると0~4まですべて表示をさせることはできるのですが、任意の要素の中に入れる方法がわかりません。
なにとぞご教授いただけないでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

javascript

1for (var i = 0; i < 5; i++) { 2 document.getElementById('render').innerHTML += i + '<br>'; 3}

投稿2017/04/26 11:39

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

umauman

2017/04/26 12:49

早速回答いただきましてありがとうございます。記述いただいたコードで意図通りの表示になりました。
guest

0

innerHTML

innerHTML上書きするので、innerHTML に代入する前に連結した文字列を入れる必要があります。

JavaScript

1var result = []; 2for (var i = 0; i < 5; i++) { 3 result.push(i); 4} 5document.getElementById('render').innerHTML = result.join('<br>');

insertAdjacentHTML

HTMLを挿入するなら insertAdjacentHTML を使います。
(※innerHTML+= で上書き追加すると、既存のDOM参照は失われるので、お勧めはしません。)

JavaScript

1var element = document.getElementById('render'); 2for (var i = 0; i < 5; i++) { 3 element.insertAdjacentHTML('beforeend', i + '<br>'); 4 result = i; 5}

createDocumentFragment()

ノードを挿入するなら、createDocumentFragment を使います。
今までの方法はHTMLタグを挿入or上書きするものでしたが、ノードで扱う事で特殊文字(<>&"')のエスケープミスによる不具合(XSS)から解放されます。

JavaScript

1var df = document.createDocumentFragment(), br = document.createElement('br'); 2 3for (var i = 0; i < 5; i++) { 4 df.appendChild(document.createTextNode(i)); 5 df.appendChild(br.cloneNode(false)); 6} 7 8document.getElementById('render').appendChild(df);

Re: umauman さん

投稿2017/04/26 12:00

編集2017/04/26 12:09
think49

総合スコア18172

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

umauman

2017/04/26 13:02

innerHTMLは上書きされてしまうのですね。色々な挿入の記述を教えていただきありがとうございます。特に「insertAdjacentHTML」についてもっと調べてみます。セキュリティに留意するのであればここまで書けるようにならないといけないのですね。色々と調べるきっかけになりそうです。ありがとうございました。
umauman

2017/04/26 14:08

これも重要そうですね。 >(※innerHTML を += で上書き追加すると、既存のDOM参照は失われるので、お勧めはしません。)
guest

0

ベストアンサー

原因

それぞれのコードがなぜ思い通りに動かなかったか説明すると

一つ目は#renderのHTMLを毎回変えているが、
前の処理を上書きしているから最後の処理しか反映されない

js

1for (var i = 0; i < 5; i++) { 2 document.getElementById('render').innerHTML = i + '<br>'; 3}

二つ目も上と同じで変数の中身を毎回上書きしているから

js

1var result = 0; 2for (var i = 0; i < 5; i++) { 3 result = i + '<br>'; 4} 5document.getElementById('render').innerHTML = result;

解決策

それぞれの代入の時に=ではなく+=を使うことで前の値に追加で入れることが出来ます。

js

1for (var i = 0; i < 5; i++) { 2 document.getElementById('render').innerHTML += i + '<br>'; 3}

js

1var result = ""; 2for (var i = 0; i < 5; i++) { 3 result += i + '<br>'; 4} 5document.getElementById('render').innerHTML = result;

2017年4月26日 午後9時28分 ソースコードを一部修正

投稿2017/04/26 12:01

編集2017/04/26 12:29
yuta0801

総合スコア270

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

umauman

2017/04/26 13:06

「+=」とするところが追加していく上でのポイントなのですね。とても丁寧にわかりやすくご説明いただきありがとうございます!
guest

0

NGだった記述はどちらも上書きされて最終的な結果しか表示されていません。
サンプル記述していましたがKosuke_Shibuyaさんが回答されていたのでひかえておきます。
追記しないとだめということですね。

JavaScript

1document.getElementById('render').append(i + '<br>');

試していませんが追記なのでこれでもできると思います。

投稿2017/04/26 11:44

no-bu

総合スコア75

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

umauman

2017/04/26 12:51

ご回答ありがとうございます。いただいたコードですと、<br>の部分はそのまま文字列としてページに表示がされるものの「append」ですと、上書きされずにすべてが表示されることがわかりました。 勉強になりました。
guest

0

JavaScript

1var result = ''; 2for (var i = 0; i < 5; i++) { 3 result += i + '<br>'; // 「result = 」では中身を全部上書きしてしまう。 4} 5document.getElementById('render').innerHTML = result;

投稿2017/04/26 11:57

kei344

総合スコア69551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

umauman

2017/04/26 13:09

”「result = 」では中身を全部上書きしてしまう。”のコメントありがとうございます。 「var result = '';」の部分も「0を入れておいたらダメなのかな?」と思ったのですが、他の回答者様の補足でなんとなく理解できた気がします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問