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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

879閲覧

JavaScriptでループできない

unity.hatu

総合スコア18

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2020/01/13 14:09

実現したいこと

JavaScript初心者です。
JavaScriptでapiを読み込もうとしています。
しかしループ処理をしているのにもかかわらず一つしか表示されません。
どのようにすればいいのか教えてください。

コード

javascript

1window.addEventListener('load', function() { 2 getTrainList(); 3}); 4 5function getTrainList() { 6 var url = 'url'; 7 fetch(url) 8 .then(function (data) { 9 return data.json(); // 読み込むデータをJSONに設定 10 }) 11 .then(function (json) { 12 for (let i = 0; i <= 100; i++) { 13 const time = json[i].time; 14 const massage = json[i].massage; 15 const writetime = document.getElementById("time") 16 const writemassage = document.getElementById("massage") 17 const str = massage; 18 const brmassage = str.replace( '/n', '</br>' ); 19 writetime.innerHTML = (`${time}`); 20 writemassage.innerHTML = (`${brmassage}`); 21 } 22 }); 23}

html

1<body> 2 <h1>train</h1> 3<div id="time"></div> 4<div id="massage"></div> 5 <script src="script.js"></script> 6</body>

(body内抜粋)

参考ページ

https://qiita.com/tarch710/items/91b8abc124a7efbc7a93
表で表示はしたくなかったのでアレンジしたのですが表示できなくなりました。

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

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

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

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

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

H40831

2020/01/13 15:12

エラーは出ますか?
unity.hatu

2020/01/14 10:24

エラーは全く出ていません。 またwritemassage.innerHTML = (`${brmassage}`);の後に console.log()で値を取ることはできています。
guest

回答1

0

ベストアンサー

writetime.innerHTML = (`${time}`); writemassage.innerHTML = (`${brmassage}`);

これだとループする度にwritetimewritemessageのinnerTextを上書きしているので、何回ループしても最終的に1つしか表示されないのかと思われます。

テキストを追記するのではなく上書きしていくように書けば意味がわかります。
しかし、HTMLタグごと増やしていきたいならDOM操作も必要になってきます。
DOM操作には色々あるので、必要ならググってください。

投稿2020/01/13 15:22

H40831

総合スコア973

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

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

unity.hatu

2020/01/15 07:35

解説ありがとうございます。 DOM操作ですか… 頑張って勉強します
H40831

2020/01/15 17:40

「JavaScript DOM操作 まとめ」とかで調べてみればわかるとおもいますが、 頑張るというほど難しい話ではないですよー HTMLをいじるための関数がいくつかあるだけです
unity.hatu

2020/01/18 07:58

ありがとうございます。 少しググってやってみました。 何とか形にできました。
H40831

2020/01/18 10:35

解決されたようで、なによりです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問