HTMLファイルの中にRubyのコードを記述したいのです。

プログラミング初心者です。

現在、ruby on rails 使ってyes no 診断を作っています。

下の図のようにhtml1の質問項目のyes,no結果によって、html2で表示する画像を変えたいです。rubyのグローバル変数を利用して実施しましたが、うまくいきません。方法自体が間違っているのでしょうか？どなたかアドバイスいただきたいと思います。

html1
1<body>
2    :
3<script>
4<% $menuaka = 0 %>
5
6$(function(){
7
8  $(".btn_yes").on("click", function() {
9  <% $menuaka = 1 %>
10   });
11
12  $(".btn_no").on("click", function() {
13  <% $menuaka = 2 %>
14   });
15});
16</script>
17</body>

html2
1<% if  $menuaka == 1 %>
2<div class="   " ><img class="    " src="画像A"></div>
3<% elsif  $menuaka == 2 %>
4<div class="   " ><img class="    " src="画像B"></div>
5<%end%>

m.ts10806

2019/04/13 23:44

それくらいならRuby介さずJavaScriptだけでやっては、と思いますが、どうしてもRuby介したいのでしょうか。いずれにしてもその記述の仕方だとブラウザには<% %>で書いているところは何も出力されていないはずなので動かないのは当然と言えば当然ですが。

akintat-2748

2019/04/13 23:55

特にRubyを介したいという訳ではないです。ページ外まで変数を維持するのがrubyしかできないと思っていました。JavaScriptでも同様にグローバル変数のようなものがあるのでしょうか？あと今後のために、なぜこの記述だと何も出力されないのでしょうか。

m.ts10806

2019/04/14 00:13

JavaScriptはイベント駆動です。つまり「Yesを押した」「Noを押した」を以て”画面遷移を伴わず”　画像を切り替える処理を入れればいいだけでグローバルに持つ必要は一切ありません。画像部分のhtmlを部分的に切り替えればいいだけです。 >なぜこの記述だと何も出力されないのでしょうか。 Rubyがサーバー側の言語だからです。Rubyが行うのはクライアント（ブラウザ・HTML）からのリクエストを受け取って何かしら処理を行い、画面に出力する処理を行うので、Ruby側で「画面に出力」したものしかブラウザには表示されません。今回は何も出力されていないので何も持ってないわけです。 ”何も出力されない”のはブラウザ「ソースを表示」をしてみれば分かりますよ。

akintat-2748

2019/04/14 00:36

なるほど、丁寧な回答ありがとうございます。 html1の方で画像部分のhtmlを切り替える処理を記載するということで間違ってないでしょうか？

m.ts10806

2019/04/14 00:38

まずそこはやってみてはどうでしょうか。何かを実現するための手法は1つではないので。 JavaScriptだけでするならそれはそれなりの、Rubyを利用したいならそれはそれなりの、適切に書く必要はありますし、それもそれぞれやり方は１つではないです。

akintat-2748

2019/04/14 00:42

わかりました。ありがとうございます。一度やってみます！