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

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

ただいまの
回答率

88.33%

配列内をindexOfで検索した際に想定と違った値が返ってきてしまうう

解決済

回答 3

投稿 編集

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

aae_11

score 134

以下のコードにつきまして、うまくいかない部分があり、その点につきましてお聞きしたいです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script></script>
  <style>
    #content_box{

      margin:100px auto;
      width:300px;
      height:300px;
      border-radius: 50%;
      background-color:red;
      border:1px solid red;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-shadow:1px 1px 1px rgba(255,255,255,0.7);
    }
    #content{
      text-align:center;
      font-size:50px;
      font-weight: bold;
      color:#fff;


    }

  </style>
</head>
<body>
  <button id="content_box">
    <p id="content"></p>
  </button>
  <script>
    document.addEventListener('DOMContentLoaded',function(){
      let data = document.getElementById('content_box');
      data.addEventListener('click',function(){
        let search_data = data.textContent;
        // console.log(search_data);
        let items = ['凶','吉','末吉','中吉','大吉'];
        let result = items.indexOf(search_data);
        console.log(result);
        if(!result == -1){
          items.splice(result,1);
        }
        let random = Math.floor(Math.random() * items.length);
        document.getElementById('content').innerHTML = '<p class="content">' + items[random] + '</p>';   
      },false);
    },false);

  </script>
</body>
</html>


上記のコードは簡易なおみくじアプリのようなもので、ボタンを押す度にlet items = ['凶','吉','末吉','中吉','大吉'];この中からランダムに文字が取得され表示されるといったものです。
うまくいかない部分なのですが、「let result」の値がなんどクリックされても常に「-1」となってしまっているといった点です。button要素の初期値は「?」であり、itemには含まれていないため、「-1」を返すのは理解できるのですが、2回目のクリックでは、itemsの中に格納されている値がsearch_dataとしておくられてくる為、itemsのインデックス番号を返すのではないかとの想定だったのですが、現状何度クリックしても「-1」がresultに格納されてしまっている状態です。
何故このような現象が起きてしまっているか分からない為、ご助言など頂けましたら幸いです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+2

こんにちは

現状だと、search_data には、先頭と末尾に余計な改行が含まれてしまっていると思われますので、以下の修正でいかがでしょうか?

修正前:

let search_data = data.textContent;


修正後:

let search_data = data.textContent.trim();

参考になれば幸いです。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/08/15 10:16

    ご回答ありがとうございます。
    ご提示いただきましたように、修正しましたら、search_dataの初期値(?)以外の値がsearch_dataに入ってきた場合、resultの値が「-1」になるということはなくなりました。
    少し、疑問な点があるのですが、button要素の部分をクリックした際、デベロッパーツールで確認する限りは<p class="content">内の先頭及び末尾に空白は存在しないのですが、何故trimを通した場合、resultに正常な値が返されるようになったのでしょうか...?

    キャンセル

  • 2019/08/15 10:48

    コメントありがとうございます。

    > <p class="content">内の先頭及び末尾に空白は存在しないのですが、

    ご質問のコードでは、

     let data = document.getElementById('content_box');

    となっていて、 data は <p> ではなく <button> のほうを取得しており、 <button> は以下

    <button id="content_box">
    <p id="content">?</p>
    </button>

    のように3行で書いているので、

     let search_data = data.textContent;

    でテキストを取得すると、 <p> の内容の文字列の前後に改行が含まれた文字列が返されます。

    もし、trim() を追加しないで、ご質問のコードにある、

     let search_data = data.textContent;

    のままで処理するのであれば、以下の (1)または(2)のように修正すればよいかと思います。

    (1) data は <p id="content"> のほうを取得するように、

    let data = document.getElementById('content')

    とする。

    (2) HTMLの <button>を以下のように一行で詰めて書く

    <button id="content_box"><p id="content">?</p></button>

    キャンセル

  • 2019/08/15 11:13

    ご返信ありがとうございます。
    ご丁寧に教えてくださり、助かりました。
    textContentプロパティの使い方を少し、勘違いしてしまっていました。
    ご提示いただきました、(1)番の方法で、代替してみたいと思います。

    キャンセル

  • 2019/08/15 11:16

    どういたしまして。解決されましたようで、よかったです👏

    キャンセル

0

let search_data = '吉'; //適当に文字いれてみた
let items = ['凶','吉','末吉','中吉','大吉'];
let result = items.indexOf(search_data);

console.log(result);

出力結果

1

search_dataに何が入っているかは確認しましたか?

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/08/15 09:55 編集

    ご回答ありがとうございます。
    search_dataはconsole.logで確認したのですが、確かに文字列「'末吉'」などが渡ってきてはいたんですよね...
    なので、何故、resultが「-1」となってしまうかが、分からないといった状況です...

    キャンセル

0

let data = document.getElementById('content_box');

で、dataに代入されるのは次のbuttonタグになるかと思います。

  <button id="content_box">
    <p id="content"></p>
  </button>

そうすると、
let search_data = data.textContent;

でsearch_dataに入るのは "<p id="content">?</p>"のような文字列になるのではないでしょうか?

search_dataには、「<p id="content">?</p>」の ? の部分( document.getElementById('content').innerHTML = '<p class="content">' + items[random] + '</p>';  
のコードで、? は”大吉”などに書き換わっている)を入れないといけないのだと思われます。

これが、プログラムが思ったように動作しない原因ではないでしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/08/15 10:21

    ご回答ありがとうございます。
    let search_data = data.textContent.trim();
    console.log(search_data);
    こちらの部分でconsole.logにて、確認する限り、search_dataには、「?」となっており、タグ部分は含まれていない状態になっています。

    キャンセル

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

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

関連した質問

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