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

No.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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- C言語・C++・C# 画像の画素値を変えるC言語のプログラムで指定された画像の中に白い三角形を右上に表示させるにはどのよう 3 2022/10/30 01:16
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- C言語・C++・C# このプログラミング誰か教えてくれませんか 1 2022/06/02 15:27
- HTML・CSS 疑似要素で背景画像に指定したSVG画像の色変更 2 2023/01/30 22:45
- PHP PHP echo バックスラッシュの使い方 img要素 2 2023/01/08 22:46
- その他(プログラミング・Web制作) Leafletで画像をon、offさせる方法について 2 2022/11/01 15:34
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- Excel(エクセル) excelvbaでスライドショーを作りたい 2 2023/04/20 14:32
- その他(プログラミング・Web制作) Linuxについて質問です。 引数に指定されたアクセスログのファイルからアクセス数が多い順に上位3つ 1 2023/02/03 03:46
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
jQuery bxSlider 画像に変更
-
クリッカブルマップの一部分だ...
-
画像をクリックして別の画像を...
-
javaを使ってマウスオンでの画...
-
ランダム表示に加えwidthをブラ...
-
画像にロールオーバーするとメ...
-
プルダウンの位置がwin/macでず...
-
Javascript で共通の処理をどこ...
-
javascriptテキストBOX色を元に...
-
フォームに入力された値により...
-
MAX関数を使ってからLEFT JOIN...
-
自働生成される<div>タグに連番...
-
javascriptでフォーカスを当て...
-
指定したパスが現URLに含まれて...
-
removeAttribute()メソッドで削...
-
CSS <div>の入れ子が反映さ...
-
外部javascriptの重複を防ぐには
-
クリックすると下に説明文が出...
-
YouTubeをブログに貼る時、1つ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
画像の重なりの順序を代える方...
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
透過pngの透明部分以外をクリッ...
-
1枚の画像をクリックして複数の...
-
ステータスバーについて
-
JavaScript スライドの画像にリ...
-
マウス追従スクリプトについて
-
画面の表示位置を指定させて表...
-
Javascriptで指定した日付と時...
-
プルダウンの位置がwin/macでず...
-
jQueryで特定のURLの時のみ表示
-
オンマウスで、画像切り替え+...
-
バナー広告のように表示させた...
-
ランダム表示に加えwidthをブラ...
-
JavaScriptとチェックボックス...
-
ホォルダの読む込み
-
jQuery bxSlider 画像に変更
-
画像にロールオーバーするとメ...
おすすめ情報

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