【javascript】配列からひとつづつ表示し、表示されたものは配列から削除していく方法
クイズアプリを作る時に必要な部分を紹介します。
問題を配列で準備し、ランダムに1問ずつ表示し、終わった問題は、配列から削除していきます。
<div class="qWrapper">
<div id="questions"></div>
<button type="button" class="nextBtn">Start</button>
</div>
.qWrapper{
width: 80%;
height: 200px;
background: rgb(0, 119, 255);
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;
color: #fff;
}
#questions{
font-size: 2em;
margin: 30px ;
}
.nextBtn{
width: 80px;
height: 30px;
font-size: 22px;
margin: 30px;
}
Math.floor(Math.random()で、ランダムさせる。
indexOf()で、配列の中から表示された問題を検索
splice()で、検索された問題を配列から削除する。
let list= ['問題1','問題2','問題3',
'問題4','問題5','問題6',
'問題7','問題8','問題9','問題10',]
const questions = document.getElementById("questions");
const array = document.getElementById("array");
const nextBtn = document.querySelector(".nextBtn");
questions.textContent = "スタート!";
array.textContent = list;
nextBtn.addEventListener("click", function () {
if(list.length===0 && nextBtn.textContent == 'Reset'){
window.location.reload();
}else if(list.length===0){
questions.textContent = '終了!';
nextBtn.textContent = 'Reset';
array.textContent = '';
}else {
nextBtn.textContent = 'Next'
const questionIndex = list[Math.floor(Math.random() * list.length)];
questions.textContent = questionIndex;
array.textContent = list;
const index1 = list.indexOf(questionIndex);
list.splice(index1, 1);
}
})
参考

こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク