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

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

ただいまの
回答率

87.94%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 276

score 7

  • 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);
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2021/01/28 17:20

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

    キャンセル

  • cherry2020

    2021/01/28 17: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 17:50

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

    キャンセル

回答 1

checkベストアンサー

+1

とりあえず

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/01/28 20:44

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

    キャンセル

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

  • ただいまの回答率 87.94%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る