ランダムに出力された複数の画像を表示したい

Question

前提・実現したいこと

math.random関数で配列から取得した画像を
並べて表示したい（10連ガチャ）

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

画像が1枚しか表示されない

該当のソースコード

function gacha10(){
var arr = ['red_gacha.png', 'blue_gacha.png', 'kigurumi_gacha.png'];
var obj = document.getElementById("im1");
var a = Math.floor(Math.random() * arr.length);
for(i = 0 ; i < 10 ; i++){
obj.src = arr[a];
  }
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

細かくて申し訳ないですが「出力」と「表示」は等価では？＞タイトル

Answer 1

for文の中で画像を上書きしているため画像が1枚しか表示されていません．
要素を新しく生成する，または，画像を配置するたびにobjをid="im1"から変更する必要があります．

要素を新しく生成するサンプルは以下です．

function gacha10(){
	var arr = ['red_gacha.png', 'blue_gacha.png', 'kigurumi_gacha.png'];
	var imageArea = document.getElementById("imageArea");// divなどimageを配置する要素を準備してください．
	
	for(i = 0 ; i < 10 ; i++){
		var a = Math.floor(Math.random() * arr.length);// 結果が毎回変わるようにfor-loop内に移動させています．
		// imgタグを新しく生成してimageAreaに追加します．
		var gachaImg = document.createElement("img");
		gachaImg.src = arr[a];
		imageArea.append(gachaImg);
  }
}