Javascriptトランプで一枚ずつカードを並べていきたい

Javascriptトランプで一枚ずつカードを並べていきたく、
まず最初に、
ボタンを押すと1から5の数字をランダムに並べていくコードを作ろうと思いました。
しかし、下記のコードだと、ランダムに1枚の数字を出してくれるのですが、並べて書けません。
ul.appendChild(li要素）とすると、どんどん下に数字が並んでいくと思っていたら、最初の一枚の数字が入れ替わるだけになってしまいました。
どのようにしたら
・１
・３
・５
・４
・２
このように数字を並べられるでしょうか？
ご教授ください。

javascript
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Thimble Sample</title>
6    <link rel="stylesheet" href="style.css">
7  </head>
8  <body>
9    <button id="btn">ボタン</button>   
10    <ul id="output">
11    </ul>
12    <script>
13      const btn = document.getElementById('btn');
14      const output = document.getElementById('output');
15      const li = document.createElement('li')
16      const nums = [1,2,3,4,5]
17      btn.addEventListener('click', () => {    
18          const num = nums.splice(Math.floor(Math.random()*nums.length),1)[0];
19          console.log(nums);
20          console.log(num);
21          li.textContent = num
22          output.appendChild(li);      
23      });
24    </script>
25  </body>
26</html>
27

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

回答2件

ベストアンサー

エレメントの作成は、イベントハンドラの関数内でやらないとダメですよ。
エレメントはappendされると、元にいた場所から移動する様な動きをします。

javascript
1      const btn = document.getElementById('btn');
2      const output = document.getElementById('output');
3      const nums = [1,2,3,4,5]
4      btn.addEventListener('click', () => {    
5          const num = nums.splice(Math.floor(Math.random()*nums.length),1)[0];
6          console.log(nums);
7          console.log(num);
8          const li = document.createElement('li')
9          li.textContent = num
10          output.appendChild(li); 
11      });

投稿2019/06/10 05:21

編集2019/06/10 05:37

foobar810

総合スコア217

rickey

2019/06/10 23:30

教えていただきありがとうございました。まだ、基本を理解していないんだと実感してしまいました。ありがとうございます。今後、このようなコードは何度も書くと思いますので、わかってよかったです。

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

numsを走査しないと1回で処理がおわっちゃいますね

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  const btn = document.getElementById('btn');
4  const output = document.getElementById('output');
5  btn.addEventListener('click', () => {    
6    const nums = [1,2,3,4,5].map(x=>[x,Math.random()]).sort((x,y)=>y[1]-x[1]).map(x=>x[0]);
7    while(li=output.querySelector('li')){
8      li.parentNode.removeChild(li);
9    }
10    while(num=nums.shift()){
11      const li = document.createElement('li');
12      li.textContent = num;
13      output.appendChild(li);
14    };
15  });
16});
17</script>
18
19<button id="btn">ボタン</button>   
20<ul id="output"></ul>