質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

811閲覧

Javascriptでshiffle()を使いたい

Tomozawa

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/10/08 04:13

前提・実現したいこと

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/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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() を使って配列に直したら、うまく作動しました。丁寧な回答ありがとうございました。
guest

0

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">

投稿2021/10/08 04:54

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2021/10/08 04:56

改行マークなど若干テキストノードの影響をうけるため表示の調整にはcssが必要
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問