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

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

ただいまの
回答率

87.33%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 499

score 20

作りたい物

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

コード

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>アコーディオン</title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/acordion.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>テスト</h1>
    <section class="program_wrapper">
    <h2 class="program_hd">ルーレット</h2>
    <p class="result">ここに結果を表示</p>
        <div class="btn_flex">
        <button class="start_btn">スタート</button>
            <button class="stop_btn">ストップ</button>
        </div><!--/.btn_flex -->
        <div class="btn_flex">
            <button class="remove_btn">表示された名前を削除</button>
            <button class="reset_btn">リセット</button>
    </div><!--/.btn_flex -->
    </section><!--/.program_wrapper -->
    <section class="section_2">
    </section>
<!-- <script type="text/javascript" src="js/test.js"></script>-->
<script type="text/javascript" src="js/test2.js"></script>
</body>
</html>
@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
}

h1{
    font-size: 48px;
    text-align: center;
    padding: 80px 0 40px;
}

.program_wrapper{
    width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.program_wrapper .program_hd{
    font-size: 60px;
    padding-bottom: 40px;
    text-align: center;
}

.result{
    font-size: 36px;
    padding-bottom: 40px;
    text-align: center;
}

.btn_flex{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 700px;
    margin: 0 auto 40px;
}

.start_btn,
.stop_btn,
.remove_btn,
.reset_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
    color: #fff;
    width: 300px;
    height: 60px;
    font-size: 18px;
    transition: .6s;
}

.start_btn:hover,
.stop_btn:hover,
.remove_btn:hover,
.reset_btn:hover{
    opacity: .7;
}
var nameList = ['根岸','岩田','佐藤','小野','佐々木','野口','山田','黒田',
'神山','清本','山崎','鈴木','多田','堀内','浜崎','杉田'];
var startBtn = document.querySelector('.start_btn');
var stopBtn = document.querySelector('.stop_btn');
var removeBtn = document.querySelector('.remove_btn');
var result = document.querySelector('.result');
var totalCount = nameList.length;
var count = nameList[0];
startBtn.addEventListener('click',loopTimer);
stopBtn.addEventListener('click',stopTimer);
removeBtn.addEventListener('click',removeName);

//スタートボタンを押すと名前をループさせる関数。
function loopTimer(){
  roulette = setInterval(function(){
    //0~リストの総数の範囲内で、ランダムな整数を生成。
    count = Math.floor(Math.random() * totalCount);
    //ルーレット
    resultCount = nameList[count];
    result.innerHTML = resultCount;
    console.log(resultCount);
  },100);
}

//ルーレットを停止
function stopTimer(){
  if(roulette){
    clearInterval(roulette);
  }
}

//表示された名前を除外
function removeName(){
  nameList.splice(count,1);
}

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

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

試した内容

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

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

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

などで解決できます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/06/22 16:42

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

    キャンセル

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

  • ただいまの回答率 87.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る