Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

イベントリスナー

#初心者です。
練習で入力フォームの入力チェックのプログラムを作成してします。独学なので、何か自己流が多い等、変ならすみません汗
 今回、質問させていただくのは下記のイベントリスナーでの性別の判定ボタン(ラジオボタン3つ)のチェックです。1つのsendボタンで2つのイベントを発生させたくて記述してみました。
 作業場の問題エラーもなく、検証でもエラーを警告されませんが、条件下で出現させるはずのinnerHTMLの文字が出っぱなしです。どのラジオボタンにチェックをしても一向に消えません。まだ浅い理解しかできておりませんがnameで参照したので、html Collection配列です。上記の名前フォームは動作しますので抜粋で掲載しました。どうぞ鞭撻のほど宜しくお願いします!
##該当するソースコード

sample.js
send.addEventListener('click',function(){
for (let i = 0; i <= namae.length; i++){
if (namae[i].value==""){
errors.innerHTML = "Please enter your name.";
}else{
errors.innerHTML = "";
}
}
});
send.addEventListener('click',function(){
flag = true;
for (let j = 0; j <= genders.length; j++){
if(!genders[j].checked){
flag = false;
errorsradio.innerHTML ="Please choice your gender.";
}eles if(flag == true){
errorsradio.innerHTML ="";
}
}
});

###自分で試したこと

有名functionに変えて、下記にイベントリスナーにfunctionを呼び出す方式にすれば動作はしたが、それは何故か問題が無く動かない^^;

0

3Answer

genders配列がどのような状態で構成されるのかが全く分からないです。
配列各要素(genders[0], genders[1], ...)は何を意味しているのか?(言い換えると何の値か)
どうなったとき配列要素がtrue(またはfalse)になるのか?
などなど

あと、質問文のMarkdownが崩れているので、投稿前にプレビューでか確認する癖をつけることをお勧めします。

(誤) ###自分で試したこと
(正) ### 自分で試したこと <- #の後に空白を入れる

0Like

Comments

  1. @5BsnQaIqnyoyo

    Questioner

    ご返答ありがとうございます。せっかく教わるチャンスなのにコードをすべて掲載すべきでした。失礼しました💦配列各要素の意味は、ラジオボタンはオンならtrue、オフならfalse!flagは先に立てたらいい。くらいしかわかっておりません。忝いです。また勉強し直します!
    そしてMarkdownの空白でした、気をつけます。
  2. gendersという変数名であること、配列1要素が1つのラジオボタンの選択状態に対応していることから、

    gender[0]・・・性別:男性の選択状態
    gender[1]・・・性別:女性の選択状態
    gender[2]・・・性別:その他の選択状態
    ・・・

    という内容でしょうか?
    またgendersは、いずれか1つの配列要素のみがtrueになると想定されているのでしょうか?(ラジオボタンだからそうなると思われるが念のため確認)
  3. @5BsnQaIqnyoyo

    Questioner

    そうです!そして配列各要素も1つがtrueになると、flagの代入が変わる💦素人考えでもflaseからしてないとややこしいと思いました。重ねて質問は申し訳ないので自分でもう一度調べてみます。
  4. @5BsnQaIqnyoyo

    Questioner

    先程、確認すべきところのご指摘通り、確認してみたら出来ました!ありがとうございました。

情報が少ないので、一般的(抽象的)なアドバイスになってしまいますが、ラジオボタンの値をJavaScriptで処理する際は、HTMLInputElement[]に対してfor文で回すよりも、RadioNodeListに対してvalueプロパティを得た方が直感的で分かりやすいかと思います。
RadioNodeListは、document.forms[フォーム名][ラジオボタン名]で取得できます。
※掲載していただいているコードの誤りはj=0から順に代入してもらえると分かると思います。

追記

日本語がよく分からないので、以下のデモを参考にしてください。

See the Pen qiita-questions-690bf143d5c42cffbc58 by _y_s (@ys-j) on CodePen.

なお、フォームのチェックは、送信ボタンのclickイベントでするのではなく、フォームのsubmitイベントでおこなうのが一般的かと思います。(キーボード操作でフォームを送信する可能性があるため。)
0Like

Comments

  1. @5BsnQaIqnyoyo

    Questioner

     htmlファイルにvalueを記述して、それを取得する というので理解できていたら嬉しいです。RadioNodelistを調べます。またj=0からならば余分に数えている です💦これも調べます。詳しくご返答ありがとうございました。

投稿者なら右上の…から編集することができますよ。
可能なら編集してコードを記載したほうが解決の助けになるでしょう。

image.png

0Like

Comments

  1. @5BsnQaIqnyoyo

    Questioner

    ありがとうございます!編集機能使ってみます。

Your answer might help someone💌