重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

【GOLF me!】初月無料お試し

getElementByIdによって指定した場所に、for文を使って指定したURL先の画像を表示したいのですが、for文の中にdocument.getElementById(“data”).src=url;(右辺のurlはあらかじめ作ったURLを代入した変数)と書いたところ最後の画像だけが表示されるという結果になってしまいました。画像が更新されず、どんどん追加されていくようにするにはどのようにすればいいのでしょうか?
どなたか分かる方ご教示願います。

質問者からの補足コメント

  • I’dは一意になっている状態です

      補足日時:2021/08/01 23:59

A 回答 (2件)

こんばんは



>getElementByIdによって指定した場所
というのが、質問者様のケースではどのような要素なのかわかりませんけれど、同一IDは1文書中に1つしか存在しないはずなので、「同じ要素に複数の画像URLを与える」というのには無理があります。
当該要素が包含要素で「その要素内に画像を(複数)追加してゆく」ことであれば可能です。

以下は、IDで指定したdiv要素内に複数画像を追加する例です。
ご参考にでもなれば。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
</head>
<body>

<div id="hoge"></div>

<script>
const urls = ['pc/201.png', 'pc/202.png', 'pc/203.png'];
const urlPre = 'h' + 'ttps://oshiete.xgoo.jp/images/feeling/qjiro/';
const div = document.getElementById('hoge');

for (let i = 0; i<urls.length; i++){
const img = new Image();
img.src = urlPre + urls[i];
div.appendChild(img);
}
</script>
</body>
</html>
    • good
    • 1
この回答へのお礼

ありがとうございます。こちらを参考に考えてみます。

お礼日時:2021/08/02 15:17

IDはHTMLの中で一意でなければなりませんが、その関係ではありませんか?

    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!