Q&A
ご回答ありがとうございます。
分かりやすく、勉強になりました。
以下のコードにつきまして、お聞きしたい点がございます。
<!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; box-shadow:0 10px 0 #d1483e; cursor:pointer; } #content{ text-align:center; font-size:50px; font-weight: bold; color:#fff; } #content_box:hover{ opacity:0.9; } </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 = document.getElementById('content').textContent; // console.log(search_data); let items = ['凶','吉','末吉','中吉','大吉']; let result = items.indexOf(search_data); console.log(result); if(!result == -1){ console.log(result); 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>
上記コードのbutton要素をクリックしたら、クリックイベントへと遷移しますが、その際、初回のクリック以外の場合は、変数「result」に「-1」以外が挿入されますが、if文内が実行されない状況です。
if文の前で、resultをconsole.logに出力させてみた所、整数が格納されていることの確認が取れました。
何故if文内の処理が実行されないかが分からない為、ご教示頂けましたら幸いです。
回答5件
0
ベストアンサー
!result == -1は、==より前に!が解釈されて、「!resultが-1と等しいかどうか」という意味になってしまいます（!resultはtrueもしくはfalseになりますので、==で-1と比較した場合、一致しません）。
素直にresult != -1とするか、単項!を使いたければ!(result == -1)と、演算順序を明示しましょう。
投稿2019/08/15 02:29
総合スコア145184
0
演算子の優先順位を抜粋します。
| 優先順位 | 演算子の種類 | 結合性 | 演算子 |
|---|---|---|---|
| 16 | 論理 NOT | 右から左 | ! … |
| 10 | 等しい | 左から右 | … == … |
以上のとおり、否定!が比較演算子==より先に処理されるのが原因です。
投稿2019/08/15 02:37
総合スコア36117
0
!result == -1
では、先に!resultが計算され、
true == -1
を計算しています。
その結果falseとなり、if文が実行されません。
なので、
if(!(result == -1)){
とすれば希望通りの結果になるのではないでしょうか？
あと、下に演算子の優先順位が記載されたurlを載せておきます。優先順位が高いものから順に実行されますので、記述の際は注意しておいたほうがいいかもしれません。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
投稿2019/08/15 02:36
総合スコア1139
0
JavaScript
1if(result != -1){ // == じゃなくて != じゃだめ？ 2 console.log(result); 3 items.splice(result,1); 4}
これでも実行されませんか？
投稿2019/08/15 02:30
総合スコア2341
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/15 02:34
2019/08/15 02:34