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

Question

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

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

（省略）
    <main class="container-chat">
      <div class="form-area">
        <div class="form-chat">
          <%= form_with(model: @trouble,id: "self_compassion") do |f| %>
            <%= f.label :trouble, "悩みをつぶやく"%>
　　　　　　　⭐️↓:troubleを選択したものは、HTML_troubleをinsertAdjacentHTMLしたい。
            <%= f.radio_button :message_type, :trouble %>
            <%= f.label :encouragement, "励ましの言葉をかける" %>
　　　　　　　⭐️↓:encouragementを選択したものは、HTML_encouragementをinsertAdjacentHTMLしたい。
            <%= f.radio_button :message_type, :encouragement  %>
            <%= f.text_field :worry, id: "content_worry", placeholder: "メッセージを入力" %>
            <%= f.submit "POST" , id: "submit_message"%>
          <% end %>
        </div>
      </div>
      <%# 最新のメッセージが反映される場所 %>
      <div id="list_messages">
        <ul class="messages">
        </ul>
      </div>
(省略)

function post() {
    const submit = document.getElementById("submit_message");
    submit.addEventListener("click", (e) => {
    const formData = new FormData(document.getElementById("self_compassion"));
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/troubles", true);
    XHR.responseType = "json";
    XHR.send(formData);
    XHR.onload = () => {
      if (XHR.status != 200) {
        alert(`Error ${XHR.status}: ${XHR.statusText}`);
        return null;
      }
      const item = XHR.response.trouble;
      const list = document.getElementById("list_messages");
      const formText = document.getElementById("content_worry");

      // const trouble_message = document.forms.message_type.trouble_message_type_trouble;
      // const encouragement_message = document.forms.message_type.trouble_message_type_encouragement;

      ⭐️ここをどう表現したらいいのかわからない
      if radioボタンがtroubleを選択していたら

      const HTML_trouble= `
      <li class="message-left-side">
        <div class="pic-chat">
          <img src="/assets/sad.png" alt="落ち込んでいる画像">
        </div>
        <div class="text-chat">
        <div class="post-content">
          ${item.worry}
        </div>
        <div class="post-date">
          投稿日時：${item.created_at}
        </div>
      </li>`;
      list.insertAdjacentHTML("afterend", HTML_trouble);

      ⭐️ここをどう表現したらいいのかわからない
      else  radioボタンがencouragementを選択していたら

      const HTML_encouragement= `
      <li class="message-right-side">
        <div class="pic-chat">
          <img src="/assets/kind.png" alt="励ましている画像">
        </div>
        <div class="text-chat">
        <div class="post-content">
          ${item.worry}
        </div>
        <div class="post-date">
          投稿日時：${item.created_at}
        </div>
      </li>`;
      list.insertAdjacentHTML("afterend", HTML_encouragement);

      ⭐️end 終わり

      formText.value = "";
    };
    e.preventDefault();
  });
}
window.addEventListener('load', post);

Comments

[yambejp]

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

[cherry2020]

コメントありがとうございます。

Railsを中心に行っていて、
`require("../post")`という形で、このJavaScriptを読み込んでいるのですが、
それがES6なのかが知識不足でわかっていません。

いつも`yarn install`をしています。
https://techracho.bpsinc.jp/hachi8833/2020_01_16/85940
このサイトで言うとYarnなのでしょうか？
（yambejpさんの質問の回答になっていなかったら申し訳ありません）

[yambejp]

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

[cherry2020]

ブラウザにソース表示してコピペすればイケルと思いますが・・・
＞＞教えてくれてありがとうございます。下記です。

```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]

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

Answer 1

とりあえず

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

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

Comments

[cherry2020]

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