
javascript 2つのセレクトボックスを全て選択されていないと、「テキストによるエラーメッセージを表示させるコード」を調べています。
該当コードは<script>■■四角の記号の部分です。
セレクトボックスを2つとも未選択でsubmitを押すと、アラートのメッセージとテキストエラーによるメッセージ2つが同時に表示されるようになっています。
コードはきちんと起動します。
該当部分のdocument.querySelector('.err')?.remove();の意味が理解できずにいます。
insertAdjacentHTMLで出したテキストエラーをセレクトボックスが空欄でない時に非表示にするとい解釈のようですが、あってますでしょうか?
class名やid名に('.err')?という名前は使用していませんがドットに.errとクエスチョンマーク?とはどういう意味なのでしょうか?
条件演算子の?でしょうか条件演算子の構文で変数 = 条件 ? 値1 : 値2;の構文とも違うようですし。
分からずにいます。回答よろしくお願いいたします。
---HTMLのコード---
<body>
<form action="form1.php" method="post" id="form">
選択項目①:
<select id="fruits" class="select1" name="fruits">
<option value="">果物を選択する</option>
<option value="リンゴ">>リンゴ</option>
</select>
選択項目②:
<select id="fruits2" class="select1" name="fruits2">
<option value="">食事を選択する</option>
<option value="ごはん">>ごはん</option>
</select>
<div class="alert15"></div><!--alert15 2つのフォーム全て記入がない場合ここにテキストエラーを表示する-->
<button id="submit" class="yohaku">
</button>
</form>
---javascriptののコード---
<script>
const form = document.querySelector('#form');
const fruits = document.querySelector('#fruits');
const fruits2 = document.querySelector('#fruits2');
// セレクトボックスを選択されてないとアラートによるエラーメッセージを表示
form.addEventListener('submit', function(event) {
let msg = "";
if (fruits.value == "") msg += "選択項目①:※選択項目①を選択して下い。\n";
if (fruits2.value == "") msg += "選択項目②:※選択項目②を選択してください。\n";
if (msg != "") {
event.preventDefault();
alert(msg);
}
});
</script>
■■
<script>
// 2つとも全て選択されてないとテキストによるエラーメッセージの表示
form.addEventListener('submit', e=>{
document.querySelector('.err')?.remove();
document.querySelector('.alert15').insertAdjacentHTML('afterend',`<span class="err">※選択項目①と選択項目②を全て選択して下さい。</span>`);
},true);
</script>
</body>
No.2ベストアンサー
- 回答日時:
こんにちは
>insertAdjacentHTMLで出したテキストエラーをセレクトボックスが空欄でない
>時に非表示にするとい解釈のようですが、あってますでしょうか?
違っています。
「セレクトボックスが空欄でない時」の判断は行っていません。
また、「非表示にする」のではなく要素をDOMから削除しています。
(次に、追加すると重複するので)
ご質問の部分は、メッセージの表示に関する処理だけを行っていますので、セレクトボックスの内容の判断やFormの送信を制御してはいません。
「Submitされたら、無条件でメッセージを表示する」という内容になっています。
スクリプトをその部分だけにしてみれば、どのような状態でも常にメッセージを表示し、送信してしまうことを確認できると思います。
内容的には、まったく同じメッセージを削除したり、また追加したりと、あまり効率が良いとは言えない処理を行っているように見えます。
document.querySelector('.alert15').textContent = '固定メッセージ';
という1行でも済ませられる内容ですから・・
(↑だと、文書構造的には少し変わりますけれど・・)
もっと言うなら、両方のスクリプトを使おうというのであれば、イベント処理をわざわざ二つに分けて設定する必要があるとも思えません。
ちなみに
>document.querySelector('.err')?.remove();
は、「オプショナルチェーン」と言われる演算子を利用した記法で、この場合は「クラスerrの要素」(=最初は存在しない)が存在すれば削除し、しなければ処理を中断してundefinedを返すということになります。
https://developer.mozilla.org/ja/docs/Web/JavaSc …
(存在しない場合(最初だけですが)に、エラーになるのを防止する目的と推測します)
No.1
- 回答日時:
2020年に新しく導入された演算子 "?." です
https://developer.mozilla.org/ja/docs/Web/JavaSc …
一般的な説明
https://ja.wikipedia.org/wiki/Null%E6%9D%A1%E4%B …
同じ意味になる様に書き換えるならば
document.querySelector('.err')?.remove()
↓
var e = document.querySelector('.err');
if (e) { e.remove(); }
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<tr>指定した表の行要素をボ...
-
その要素がjQueryでremove()済...
-
初心者です。gulpでコンパイル...
-
スマホ上で、左右スワイプで次...
-
jQueryで同じクラス名のものを...
-
<div>のタッチ状態を維持したま...
-
jQueryでシンセサイザーを作っ...
-
Colorboxがうまく設置できません
-
フォームが空欄の時にフォーム...
-
イラストレーター、縦中横のシ...
-
タグを教えてください。
-
ラジオボタンを複数選択したと...
-
jsで質問です。 formをsubmitし...
-
2025年相性がいい人のサイトの...
-
CookieをWebStoeageに変える
-
Adobe acrobat proでフォームを...
-
Outlookのアカウントがあるとメ...
-
jqueryのselect2で検索欄の文字...
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jsonテキストデータの並び替え...
-
スマホ上で、左右スワイプで次...
-
viewport幅
-
ラジオボタンを複数選択したと...
-
<tr>指定した表の行要素をボ...
-
ボタンを押したあとに画像を表...
-
画面遷移を行わずに同一ページ...
-
イラストレーター、縦中横のシ...
-
GASでチェックボックスを一括of...
-
jqueryのselect2で検索欄の文字...
-
初心者です。gulpでコンパイル...
-
階層別の組織図の自動作成について
-
セレクトを全て選択されていな...
-
セレクトボックスで配列を呼び...
-
タグを教えてください。
-
jsで質問です。 formをsubmitし...
-
Adobe acrobat proでフォームを...
-
任意の変数が任意の値になった...
-
jsで質問です。 ボタンが二つ存...
-
2段階プルダウンで1段階目の選...
おすすめ情報