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

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

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

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

Q&A

解決済

1回答

403閲覧

【JS】undefinedになった配列を削除したい

Keichi_Negishi

総合スコア24

JavaScript

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

0グッド

0クリップ

投稿2020/06/22 07:08

作りたい物

以下の仕様で、人の名前を使用したルーレットを作りたいと思っています。
・「スタート」ボタンを押すとルーレットが始まる。
・「ストップ」ボタンを押すとルーレットが止まる。
・「表示された名前を削除」ボタンを押すと、画面に表示されている人の名前が削除される。
そして、削除された人以外の名前で再び配列を作る。
・「リセット」ボタンを押すとブラウザがリロードされる。

コード

HTML

1<!doctype html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1"> 6<title>アコーディオン</title> 7<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> 8<script type="text/javascript" src="js/acordion.js"></script> 9<link href="css/style.css" rel="stylesheet" type="text/css"> 10</head> 11<body> 12<h1>テスト</h1> 13 <section class="program_wrapper"> 14 <h2 class="program_hd">ルーレット</h2> 15 <p class="result">ここに結果を表示</p> 16 <div class="btn_flex"> 17 <button class="start_btn">スタート</button> 18 <button class="stop_btn">ストップ</button> 19 </div><!--/.btn_flex --> 20 <div class="btn_flex"> 21 <button class="remove_btn">表示された名前を削除</button> 22 <button class="reset_btn">リセット</button> 23 </div><!--/.btn_flex --> 24 </section><!--/.program_wrapper --> 25 <section class="section_2"> 26 </section> 27<!-- <script type="text/javascript" src="js/test.js"></script>--> 28<script type="text/javascript" src="js/test2.js"></script> 29</body> 30</html> 31

CSS

1@charset "utf-8"; 2 3* { 4 margin: 0; 5 padding: 0; 6 text-decoration: none; 7 box-sizing: border-box; 8} 9 10h1{ 11 font-size: 48px; 12 text-align: center; 13 padding: 80px 0 40px; 14} 15 16.program_wrapper{ 17 width: 1200px; 18 margin: 0 auto; 19 padding: 0 20px; 20} 21 22.program_wrapper .program_hd{ 23 font-size: 60px; 24 padding-bottom: 40px; 25 text-align: center; 26} 27 28.result{ 29 font-size: 36px; 30 padding-bottom: 40px; 31 text-align: center; 32} 33 34.btn_flex{ 35 display: flex; 36 justify-content: space-around; 37 align-items: center; 38 width: 700px; 39 margin: 0 auto 40px; 40} 41 42.start_btn, 43.stop_btn, 44.remove_btn, 45.reset_btn{ 46 display: flex; 47 justify-content: center; 48 align-items: center; 49 background: #333; 50 color: #fff; 51 width: 300px; 52 height: 60px; 53 font-size: 18px; 54 transition: .6s; 55} 56 57.start_btn:hover, 58.stop_btn:hover, 59.remove_btn:hover, 60.reset_btn:hover{ 61 opacity: .7; 62} 63

JS

1var nameList = ['根岸','岩田','佐藤','小野','佐々木','野口','山田','黒田', 2'神山','清本','山崎','鈴木','多田','堀内','浜崎','杉田']; 3var startBtn = document.querySelector('.start_btn'); 4var stopBtn = document.querySelector('.stop_btn'); 5var removeBtn = document.querySelector('.remove_btn'); 6var result = document.querySelector('.result'); 7var totalCount = nameList.length; 8var count = nameList[0]; 9startBtn.addEventListener('click',loopTimer); 10stopBtn.addEventListener('click',stopTimer); 11removeBtn.addEventListener('click',removeName); 12 13//スタートボタンを押すと名前をループさせる関数。 14function loopTimer(){ 15 roulette = setInterval(function(){ 16 //0~リストの総数の範囲内で、ランダムな整数を生成。 17 count = Math.floor(Math.random() * totalCount); 18 //ルーレット 19 resultCount = nameList[count]; 20 result.innerHTML = resultCount; 21 console.log(resultCount); 22 },100); 23} 24 25//ルーレットを停止 26function stopTimer(){ 27 if(roulette){ 28 clearInterval(roulette); 29 } 30} 31 32//表示された名前を除外 33function removeName(){ 34 nameList.splice(count,1); 35} 36

困っている事と実現したい事

「表示された名前を削除」ボタンを押すことで、画面に表示されている名前は削除できましたが、
空の配列が残ってしまい、画面に表示されてしまいます。
また、console.logで出力すると「undefined」が出てしまいます。
「表示された名前を削除」ボタンを押した場合、削除した配列は出てこない様にしたいです。

試した内容

以下の内容を試しましたが上手くいきませんでした。
(1)filter(v => v)を使用した。
(2)if(includes(undefined))で、trueだった場合に、undefinedを含んだ値を削除する。

ご回答よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

要素の削除は正しく行われています。(コンソールにnameListを入れて確認)

問題は配列の要素数totalCountが更新されていないためにcount = Math.floor(Math.random() * totalCount);が配列の範囲外の値を取ってしまうことです。

  • 要素の削除を行うごとにtotalCount--;する
  • totalCountを使わずに直接nameList.lengthを使う

などで解決できます。

投稿2020/06/22 07:34

ohys

総合スコア147

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

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

Keichi_Negishi

2020/06/22 07:42

ありがとうございます! totalcount--;にする事で解決しました。 勉強になりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問