配列の要素を個別に取り出しランダム表示させたい

JSのnumber内の配列の要素を個別に取得して
htmlのclass="word"にランダムに個別に表示させたいです。

下記のコードの解決策が知りたいです。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>練習用</title> </head> <body> <div>第<span class="word"></span>位</div> <div>第<span class="word"></span>位</div> <div>第<span class="word"></span>位</div> <div>第<span class="word"></span>位</div> <div>第<span class="word"></span>位</div> <script> const number = ['1','2','3','4','5',]

const word = document.querySelector(".word");
number[Math.floor(Math.random()*number.length)]

number. forEach(function(value){   //配列の数だけ同じ処理をします。
const box = document.createElement("div");　　//divを生成
word.appendChild(box);　　//HTMLの子の要素の子要素として生成
box.className = 'allWord'　　//クラス名を指定
box.textContent = value;　　 //配列の値を表示する

});

</script> </body> </html>

yambejp

2023/12/06 07:04 編集

div(box)を作る意味は？かりになにか意図があるとしてdivをspanに挿入する予定でしょうか？

Lhankor_Mhy

2023/12/06 07:07

たとえば、1が5回続いてもかまいませんか？

zindex_1

2023/12/06 12:43

1が５回並んだらせず、重複せずにランダム表示させたいです。

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

回答1件

ベストアンサー

spanにdivを追加するとHTMLは崩れますが大丈夫なのでしょうか？

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const number = ['1','2','3','4','5',].map(x=>[x,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);
4  const word = [...document.querySelectorAll(".word")];
5  number.forEach(function(value,index){ 
6    const box = Object.assign(document.createElement("div"),{className:'allWord',textContent:value});
7    word[index].appendChild(box);
8  });
9});
10
11</script>
12
13<div>第<span class="word"></span>位</div>
14<div>第<span class="word"></span>位</div>
15<div>第<span class="word"></span>位</div>
16<div>第<span class="word"></span>位</div>
17<div>第<span class="word"></span>位</div>