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

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

新規登録して質問してみよう
ただいま回答率
85.48%
DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

883閲覧

【DOM操作】ラジオボタンの操作を監視し、リアルタイムで取得したい

ryota002

総合スコア18

DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/04/01 13:49

編集2021/04/01 22:23

前提・実現したいこと

JavaScriptでTwitter管理システムを作っています。
フロントからの入力フォームを実装中に以下の問題が発生しました。

発生している問題・エラーメッセージ

index.js(一部抜粋)の以下の部分で、ユーザーによるラジオボタンの操作に対応させてラジオボタンのvalueを取得したいが、返り値の値がundefinedから、変更されない。

js

1// フォームの種類を変更する処理 2const formType = changeForm(); 3console.log(formType);

該当のソースコード

index.js

js

1"use script"; 2 3import monitorLoginStatus from "../auth/monitorLoginStatus.js"; 4import changeForm from "./changeForm.js"; 5import createMethod from "./createMethod.js"; 6 7monitorLoginStatus() 8 .then(({ loginStatus, uid }) => { 9 if (loginStatus) { 10 // フォームの種類を変更する処理 11 const formType = changeForm(); 12 console.log(formType); 13 14 // firestoreへの書き込み処理 15 createMethod(uid, formType); 16 } 17 }) 18 .catch(() => { 19 alert( 20 "ログイン状態が確認できません。\n再度ログインしてからご利用ください。" 21 ); 22 location.replace("../../index.html"); 23 });

changeForm.js

js

1"use strict"; 2 3const changeForm = () => { 4 const input_genders = document.querySelectorAll("input[name=processingType]"); 5 6 for (const element of input_genders) { 7 element.addEventListener("change", () => { 8 const input_gender = document.querySelector( 9 "input[name=processingType]:checked" 10 ); 11 12 const formType = document.querySelectorAll(".form-type"); 13 14 for (const element of formType) { 15 element.classList.add("hidden"); 16 } 17 console.log(input_gender.value); 18 19 switch (input_gender.value) { 20 case "post": 21 const post = document.querySelectorAll(".post"); 22 for (const element of post) { 23 element.classList.remove("hidden"); 24 } 25 return input_gender.value; 26 case "favorite": 27 const favorite = document.querySelectorAll(".favorite"); 28 for (const element of favorite) { 29 element.classList.remove("hidden"); 30 } 31 return input_gender.value; 32 case "reply": 33 const reply = document.querySelectorAll(".reply"); 34 for (const element of reply) { 35 element.classList.remove("hidden"); 36 } 37 return input_gender.value; 38 } 39 }); 40 } 41}; 42 43export default changeForm; 44

補足情報(FW/ツールのバージョンなど)

javascript

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

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

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

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

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

guest

回答1

0

ベストアンサー

何度も同じ回答をするのは心苦しいのですが、return文がないからでは。

投稿2021/04/02 02:36

Lhankor_Mhy

総合スコア36115

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

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

ryota002

2021/04/02 06:37

addEvenListenerは、返り値を持たないようで、結局、他の部分でDOM要素にアクセスして取得することにしました。 今回も回答いただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問