前提・実現したいこと

Javascriptの練習でボタンをクリックしたら10個の画像を表示させるプログラムを作っています（スマホゲームの10連ガチャみたいな物です）
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

net::ERR_FILE_NOT_FOUND

該当のソースコード

JavaScript

  <div id="target"></div>
    <div class="btn">
    <input type="button" value="10連" id="ten">
    <input type="button" value="１回" id="one">
  </div>
  <script type="text/javascript">
      let ten = document.getElementById('ten');
      let one = document.getElementById('one');
      let img = ["img/img1.png","img/img2.png","img/img3.png","img/img4.png","img/img5.png","img/img6.png","img/img7.png","img/img8.png","img/img9.png","img/img10.png","img/img11.png","img/img12.png","img/img13.png"];
      one.addEventListener('click', function(){
          let select = Math.floor(Math.random() * img.length);
          let single = '<img src="'+ img[select] + '" alt="" />';
          target.innerHTML = single;
      });
      ten.addEventListener('click',function(){
        for(let i=0; i<10; i++){
          let select = Math.floor(Math.random() * img.length);
          let ten_time = '<img src="'+ select[i]+ '" alt="" />';
          target.innerHTML = ten_time;
          };
      });
  </script>

試したこと

ボタンクリックで画像を表示させることはできたので
for文で繰り返し処理をすれば画像が10個表示できると思ったのですが実装できなかったです

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

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

行動規範の内容に同意します

回答1件

ベストアンサー

target.innerHTML = ten_time;

毎回書き換えてますね
ほんとはdomで処理したほうがよいのですが、innerHTMLをつかうなら
追加していく処理が必要です

forの中でランダム処理をすると、ループ内でおなじ画像を表示する可能性がたかいですが
ユニークじゃなくてもよいのでしょうか？

javascript
1      ten.addEventListener('click',function(){
2        target.innerHTML = "";
3        for(let i=0; i<10; i++){
4          let select = Math.floor(Math.random() * img.length);
5          let ten_time = '<img src="'+ select[i]+ '" alt="'+ img[select] + '" />';
6            target.innerHTML+= ten_time;
7          };
8      });

sample

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const target = document.querySelector('#target');
4  const img = ["img/img1.png","img/img2.png","img/img3.png","img/img4.png","img/img5.png","img/img6.png","img/img7.png","img/img8.png","img/img9.png","img/img10.png","img/img11.png","img/img12.png","img/img13.png"];
5  Array.from(document.querySelectorAll('#one,#ten')).forEach(x=>{
6    x.addEventListener('click',e=>{
7      const id=e.target.getAttribute('id');
8      Array.from(target.querySelectorAll('*')).forEach(x=>target.removeChild(x));
9      Array(id=="ten"?10:1)
10        .fill(null)
11        .map(()=>img[Math.floor(Math.random() * img.length)])
12        .forEach(x=>{
13          target.appendChild(Object.assign(document.createElement('img'),{src:x,alt:x}))
14        });
15    });
16  });
17});
18</script>
19<div id="target"></div>
20    <div class="btn">
21    <input type="button" value="10連" id="ten">
22    <input type="button" value="１回" id="one">
23</div>