if式で一致しているはずなのに常にfalseで返す

Question

お世話になります。

ruby on rails
gem gonを使用し、変数をJSに持ってきております。

現在はif式を立てているのですが、絶対に不正解が表示されてしまっております。
console.logまでデータが持ってこれているのですが、どうしてもifが判定されません。

わかりにくい説明で申し訳ございませんが、知恵をお借りできればと存じます。
どうぞよろしくお願いします。

<form name = "answer">
 <p><input type ="text" name = "text" row = "1" cols = "15" value="" placeholder = "回答を入力" id = "textData" class = "answer__text">
 </p>
</form>
<input type = "submit" name = "btn" value = "回答" id = "sendBtn" class="answer__btn" >

$(function(){
 $("#sendBtn").click(function() {
  const getData = document.answer.text.value;
  console.log(getData)
 if (getData == gon.ansewer) {
   document.getElementById("area-ans").innerText = "正解";
   document.getElementById("area-ex").innerText = gon.explanation;
 } else {
　 document.getElementById("area-ans").innerText ="不正解";
 　document.getElementById("area-ex").innerText = gon.explanation;
  };
 });
});
  

Comments

[退会済みユーザー]

不正解と判定されるときの、getData, gon.ansewerの中身は何でしょうか

[zigrable]

console.logをelseの下に持っていき、
getDataとgon.answerを調べてみました。

答え　サンプル
getData = サンプル
gon.answer = サンプル
と表示されました

[think49]

console.log(typeof gon.ansewer, typeof getData, typeof gon.ansewer === typeof getData);
console.log(JSON.stringify(gon.ansewer), JSON.stringify(getData), gon.ansewer === getData);

[zigrable]

const getData = document.answer.text.value;
の下、elseの下に挿入した結果、同様にこのような答えが返ってきました。
定義されていないというのは、そもそもgonもtextのデータも送ることが出来ていないのでしょうか・・・？

undefined string false
undefined ""サンプル"" false

Answer 1

if 文

現在はif式を立てているのですが、絶対に不正解が表示されてしまっております。

if は「式」ではなく、「文」です。

• if...else - JavaScript | MDN

再現可能なコード

 if (getData == gon.ansewer) {

掲示されたコードには、getData, gon.ansewer の初期化処理がありませんので、我々回答者にはその状況を知る術がありません。
正しく、回答者に伝えるためには再現可能なコードが必要です。

• 最小限の・自己完結した・確認可能なサンプルコードの書き方 - ヘルプ センター - スタック・オーバーフロー

切り分け

原因を絞り込む為には、切り分けが必要です。

console.log(typeof gon.ansewer, typeof getData, typeof gon.ansewer === typeof getData);     // undefined string false
console.log(JSON.stringify(gon.ansewer), JSON.stringify(getData), gon.ansewer === getData); // undefined "サンプル" false

この結果が意味するのは、次のいずれかです。

• gon がプロパティ ansewer を持っていない
• gon.answer に undefined 値が格納されている

次のコードを実行すれば、原因を一つに絞り込めるでしょう。

console.log(typeof gon, 'answer' in gon , Object.prototype.hasOwnProperty.call(gon, 'ansewer'), Object(gon) === gon, JSON.stringify(gon));
console.dir(gon);

Re: zigrable さん

Comments

[zigrable]

ご丁寧に説明してくださりありがとうございます。
記述に関しては以後気をつけさせていただきます。

どうやらturbolinksが入っていたのでifが読み込まれていなかった？ようです。
turbolinksを削除すると通りました。

Answer 2

「サンプル」じゃ重要なところが伝わりませんよ。
「==」を使うときは、型をきちんと意識するのが大事なのは理解されていますか？

「==」と「===」の違いや、
truthy、falsyについてきちんと調べれば解決すると思います。

JavaScript 忘れがちな　=== と == の違い

Truthy - MDNリファレンス

Answer 3

turbolinksを削除が入っており、削除すると正誤の判定が出来ました。