modal内にif文を表示できません

プログラム初学者です

railsでクイズアプリを作っており、正解、不正解、あと解説をmodal内で表示させようとしています。
HTMLでtextを打ち込み、buttonを押すと正誤判定をしようとしています。
JSで正誤判定を行い、Modal内で表示させようとしています。
入力されたデータをデータベースに保存しないようにしています。

困っている事
・modal内にif文で正誤判定をしたいが、挿入の仕方がわからない

出来ている事
・modalの表示/（正誤判定以外の）テキストの挿入
・jsでformのtextを取り出し

考えたこと
・shown bs modalでif式を使えば表示できるか考えたが、表示出来ず
・HTMLにJS変数の変数を持ってこれば計算できるかと思ったが、調べたらIDでしか持ってこれないとのことで断念

html
1
2<form>
3<p><input type ="text" name = "Qanswer" row = "1" cols = "15" placeholder = "回答を入力" id = "textData" class = "answer__text">
4</p>
5</form>
6<a class = "js-modal-open" href = ""> <%# クリックでモーダルを表示 %>
7<input type = "button" name = "btn" value = "回答する" id = "sendBtn" class="answer__btn">
8</a>
9<div class="modal js-modal">
10<div class="modal__bg js-modal-close"></div>
11<div class="modal__content">
12<p>
13※正解不正解をここで表示したい<br>
14解答<br>
15解答の内容</p>
16<a class="js-modal-close" href="">閉じる</a>
17</div><!--modal__inner-->
18</div><!--modal-->
19

JavaScript
1$(function(){
2$('.js-modal-open').on('click',function(){
3$('.js-modal').fadeIn();
4return false;
5});
6$('.js-modal-close').on('click',function(){
7$('.js-modal').fadeOut();
8return false;
9});
10});
11
12
13$(function () {
14$("#sendBtn").click( function() {
15// テキストボックスのデータを取得します
16var getData = $("#textData").val();
17// 取得値をメッセージで表示します
18// if (getData == gon.post) {
19// document.write("正解");
20// } else {
21// document.write("不正解");
22});
23})
24
25

足りない情報がございましたら準備しますのでお申し付け下さい。

m.ts10806

2019/11/29 20:18

コードはマークダウンのcode機能を利用してご提示ください。また正誤判定はどこで(言語の話)行おうとしていますか？

zigrable

2019/11/30 00:51

失礼致しました。コード修正しました。 JSでの正誤判定を考えています。

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

回答1件

ベストアンサー

サーバーサイドの言語とクライアントサイドの言語は並列に動かすことは出来ません。

画面が表示された時にはRubyの処理は終わっていますし、
JavaScriptの動作の中にRubyのコードを埋め込んで「JavaScriptの中で動かす」ようなことはできません。

Ajaxで一度サーバーサイドにJavaScriptの情報を送信し、
サーバーサイド側で処理をし結果を返してJavaScript側で受け取り結果を表示させてください。
※それでもdocument.write()にはなりませんが

「言語名　Ajax」で検索するとやり方は結構出てきます。
teratailでもRailsでAjaxの質問は結構見ます。
私自身がRuby分かるわけではないですが、それだけやり方は確立されているものですので、
まず「Ajaxとは何か」「サーバーとクライアント」「リクエストとレスポンス」についての知見を深めてください。

投稿2019/11/29 21:27

m.ts10806

総合スコア80854