Javascriptでshiffle()を使いたい

前提・実現したいこと

javascriptでshuffle()を使って、取得した配列をシャッフルしたい。
具体的には、htmlの選択肢1－4をランダムに並び替えをして出力したい。

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

なし

エラーメッセージ

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8</head>
9<body>
10    <div class="answer">
11        <a href="#" data-ans="0">選択肢1</a>
12        <a href="#" data-ans="1">選択肢2</a>
13        <a href="#" data-ans="2">選択肢3</a>
14        <a href="#" data-ans="3">選択肢4</a>
15    </div>
16    <script src="main.js"></script>
17</body>
18</html>

javascript
1const $get = document.querySelectorAll('[data-ans]');
2const num = [1, 2, 3, 4];
3
4const shuffle = (arrays) => {
5
6    for (let i = arrays.length - 1; i >= 0; i--) {
7      const randomIndex = Math.floor(Math.random() * (i + 1));
8      [arrays[i], arrays[randomIndex]] = [arrays[randomIndex], arrays[i]];
9    }
10    return arrays;
11  }
12
13  shuffle($get);
14  console.log($get);
15
16  shuffle(num);
17  console.log(num);
18
19

試したこと

Htmlから取得した要素はシャッフルできなかったので、試しに数字の配列を作り同じように実行してみると、それはシャッフルできました。開発ツールでsourceを確認したところ関数自体は正しく動いているようです。aタグ以外にもpタグに変更しても結果は変わりませんでした。

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

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

回答2件

ベストアンサー

querySelectorAllの返値は配列ではなくNodeListです。

Document.querySelectorAll() - Web API | MDN

NodeListについて

NodeList - Web API | MDN

対応策としては、上記のドキュメントにあるようにArray.fromを使って配列に変換することで解決できます。

JavaScript
1const $get = Array.from(document.querySelectorAll('[data-ans]'));

投稿2021/10/08 04:47

itagagaki

総合スコア8402

Tomozawa

2021/10/08 05:07

Array.from()　を使って配列に直したら、うまく作動しました。丁寧な回答ありがとうございました。

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

javascript
1<script>
2const shuffle = arrays=>arrays.map(x=>[x,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);
3window.addEventListener('DOMContentLoaded', ()=>{
4  btn.addEventListener('click',()=>{
5    shuffle([...document.querySelectorAll('[data-ans]')]).forEach(x=>{
6      document.querySelector('.answer').appendChild(x);
7    });
8  });
9});
10</script>
11<div class="answer">
12<a href="#" data-ans="0">選択肢1</a>
13<a href="#" data-ans="1">選択肢2</a>
14<a href="#" data-ans="2">選択肢3</a>
15<a href="#" data-ans="3">選択肢4</a>
16</div>
17<input type="button" value="shuffle" id="btn">