質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

377閲覧

JavaScriptにおいて、radioボタンをどれを選択したかによって条件分岐したい

cherry2020

総合スコア10

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/01/28 08:00

  • JavaScriptにおいて、radioボタンによって、条件分岐を行いたいのですが、上手く条件分岐できません。
  • チュートリアルをみながら行っているのですが、document.formsにて変数を定義後、条件分岐でif (trouble_message){ と入れてみたりしているのですが、上手く反映できません。
  • 条件分岐を入れずに、それぞれがビュー上にliが反映されることは確認ができています。

教えていただけたら幸いです。

ruby

1(省略) 2 <main class="container-chat"> 3 <div class="form-area"> 4 <div class="form-chat"> 5 <%= form_with(model: @trouble,id: "self_compassion") do |f| %> 6 <%= f.label :trouble, "悩みをつぶやく"%> 7       ⭐️↓:troubleを選択したものは、HTML_troubleをinsertAdjacentHTMLしたい。 8 <%= f.radio_button :message_type, :trouble %> 9 <%= f.label :encouragement, "励ましの言葉をかける" %> 10       ⭐️↓:encouragementを選択したものは、HTML_encouragementをinsertAdjacentHTMLしたい。 11 <%= f.radio_button :message_type, :encouragement %> 12 <%= f.text_field :worry, id: "content_worry", placeholder: "メッセージを入力" %> 13 <%= f.submit "POST" , id: "submit_message"%> 14 <% end %> 15 </div> 16 </div> 17 <%# 最新のメッセージが反映される場所 %> 18 <div id="list_messages"> 19 <ul class="messages"> 20 </ul> 21 </div> 22(省略)

JavaScript

1function post() { 2 const submit = document.getElementById("submit_message"); 3 submit.addEventListener("click", (e) => { 4 const formData = new FormData(document.getElementById("self_compassion")); 5 const XHR = new XMLHttpRequest(); 6 XHR.open("POST", "/troubles", true); 7 XHR.responseType = "json"; 8 XHR.send(formData); 9 XHR.onload = () => { 10 if (XHR.status != 200) { 11 alert(`Error ${XHR.status}: ${XHR.statusText}`); 12 return null; 13 } 14 const item = XHR.response.trouble; 15 const list = document.getElementById("list_messages"); 16 const formText = document.getElementById("content_worry"); 17 18 // const trouble_message = document.forms.message_type.trouble_message_type_trouble; 19 // const encouragement_message = document.forms.message_type.trouble_message_type_encouragement; 20 21 ⭐️ここをどう表現したらいいのかわからない 22 if radioボタンがtroubleを選択していたら 23 24 const HTML_trouble= ` 25 <li class="message-left-side"> 26 <div class="pic-chat"> 27 <img src="/assets/sad.png" alt="落ち込んでいる画像"> 28 </div> 29 <div class="text-chat"> 30 <div class="post-content"> 31 ${item.worry} 32 </div> 33 <div class="post-date"> 34 投稿日時:${item.created_at} 35 </div> 36 </li>`; 37 list.insertAdjacentHTML("afterend", HTML_trouble); 38 39 ⭐️ここをどう表現したらいいのかわからない 40 else radioボタンがencouragementを選択していたら 41 42 const HTML_encouragement= ` 43 <li class="message-right-side"> 44 <div class="pic-chat"> 45 <img src="/assets/kind.png" alt="励ましている画像"> 46 </div> 47 <div class="text-chat"> 48 <div class="post-content"> 49 ${item.worry} 50 </div> 51 <div class="post-date"> 52 投稿日時:${item.created_at} 53 </div> 54 </li>`; 55 list.insertAdjacentHTML("afterend", HTML_encouragement); 56 57 ⭐️end 終わり 58 59 formText.value = ""; 60 }; 61 e.preventDefault(); 62 }); 63} 64window.addEventListener('load', post); 65

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2021/01/28 08:03

環境はES6でOKですか? RubyのソースではなくHTMLに書き起こしてもらったほうが 回答が付きやすいと思います サーバーサイドの言語は環境を一緒にしづらいのでjsの質問には不向きです。
cherry2020

2021/01/28 08:14

コメントありがとうございます。 Railsを中心に行っていて、 `require("../post")`という形で、このJavaScriptを読み込んでいるのですが、 それがES6なのかが知識不足でわかっていません。 いつも`yarn install`をしています。 https://techracho.bpsinc.jp/hachi8833/2020_01_16/85940 このサイトで言うとYarnなのでしょうか? (yambejpさんの質問の回答になっていなかったら申し訳ありません)
yambejp

2021/01/28 08:20

ES6は、ブラウザを足切りしていいですね?ということです IEとか無視してでしょうか? またrubyの箇所をHTMLに書き直すのを検討下さい ブラウザにソース表示してコピペすればイケルと思いますが・・・
cherry2020

2021/01/28 08:47 編集

ブラウザにソース表示してコピペすればイケルと思いますが・・・ >>教えてくれてありがとうございます。下記です。 ```html </header> <main class="container-chat"> <div class="form-area"> <div class="form-chat"> <form id="self_compassion" action="/troubles" accept-charset="UTF-8" data-remote="true" method="post"><input type="hidden" name="authenticity_token" value="X6idU9bLjZcP8QC+TVp+6vC/oBn/s/676NFHBcJ3DpWokcQ5jJq9Ph7UDU4AcQIuQMS1wUoju1hjzaDBRH9/XQ==" /> <label for="trouble_trouble">悩みをつぶやく</label> <input type="radio" value="trouble" checked="checked" name="trouble[message_type]" id="trouble_message_type_trouble" /> <label for="trouble_encouragement">励ましの言葉をかける</label> <input type="radio" value="encouragement" name="trouble[message_type]" id="trouble_message_type_encouragement" /> <input id="content_worry" placeholder="メッセージを入力" type="text" name="trouble[worry]" /> <input type="submit" name="commit" value="POST" id="submit_message" data-disable-with="POST" /> </form> </div> ``` ES6は、ブラウザを足切りしていいですね?ということです IEとか無視してでしょうか? >>ごめんなさい。この部分がわかりません。 現在、Chromeでlocal3000で確認しながら行っています。 非同期通信になるようなチャット部分を作っていました。
cherry2020

2021/01/28 08:50

そして、「回答」の方に送った後に、気付きました!!! 本当にありがとうございます。 これから行ってみます。
guest

回答1

0

ベストアンサー

とりあえず

if(document.querySelector('[name=hoge]:checked').value=="hogehoge")

的な書き方で対応すると良いでしょう
ES6であればいまさらxhrではなくfetchをご利用下さい

投稿2021/01/28 08:32

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cherry2020

2021/01/28 11:44

yambejpさん、querySelectorでif文できました。本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問