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

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

<!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には含まれていないため、「－１」を返すのは理解できるのですが、2回目のクリックでは、itemsの中に格納されている値がsearch_dataとしておくられてくる為、itemsのインデックス番号を返すのではないかとの想定だったのですが、現状何度クリックしても「－１」がresultに格納されてしまっている状態です。
何故このような現象が起きてしまっているか分からない為、ご助言など頂けましたら幸いです。

行動規範の内容に同意します

回答3件

ベストアンサー

こんにちは

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

修正前：

javascript
1let search_data = data.textContent;

修正後：

javascript
1let search_data = data.textContent.trim();

参考： MDN String.prototype.trim()

参考になれば幸いです。

投稿2019/08/15 01:05

編集2019/08/15 01:08

jun68ykt

総合スコア9058

aae_11

2019/08/15 01:16

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

jun68ykt

2019/08/15 01:48

コメントありがとうございます。 > <p class="content">内の先頭及び末尾に空白は存在しないのですが、ご質問のコードでは、　let data = document.getElementById('content_box'); となっていて、 data は <p> ではなく <button> のほうを取得しており、 <button> は以下 <button id="content_box"> <p id="content">？</p> </button> のように３行で書いているので、　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>

aae_11

2019/08/15 02:13

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

jun68ykt

2019/08/15 02:16

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

行動規範の内容に同意します

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 01:16

coco_bauer

総合スコア6915

aae_11

2019/08/15 01:21

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

行動規範の内容に同意します

JavaScript
1let search_data = '吉'; //適当に文字いれてみた
2let items = ['凶','吉','末吉','中吉','大吉'];
3let result = items.indexOf(search_data);
4
5console.log(result);