
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ランキング
-
【javascript・PHP】プルダウン...
-
onFocusOutが複数回呼ばれる!
-
メールフォームについてご教授...
-
selectタグに直接onChangeを書...
-
プルダウン 項目が多いので先頭...
-
プルダウンで選択すると、DBの...
-
ハイパーリンクを別ウインドウ...
-
ラジオボタン未チェックの場合...
-
COBOLの数字チェック
-
<JavaScript>tableタグを入力不...
-
hiddenを動的に作成したい
-
JavaScriptでラジオボタンのチ...
-
データベースの値を判断してラ...
-
javascript name="hoge"等に記...
-
入力フォームに半角スペース以...
-
テキストボックスの入力をリセット
-
Excelで作ったhtmlファイルのサ...
-
2重でメール入力チェックをした...
-
VBScriptでHTMLのセレクトボッ...
-
「オブジェクトは、このプロパ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Selectボックスの幅を自動で広...
-
プルダウン 項目が多いので先頭...
-
CSVファイルを読みこみ、プルダ...
-
Selectの中身をfor文で入れる
-
jQuery セレクトボックスで選択...
-
html selectの内容を初期値に戻す
-
JQuery selectが反映されない
-
DBの値を利用して、3つの連動し...
-
プルダウンで現在の年月日を取...
-
selectメニューのselectedの位...
-
<textarea>にプルダウンを表示...
-
javascriptでselectボックスの<...
-
プルダウンとテキストの連動
-
【javascript・PHP】プルダウン...
-
セレクトを全て選択されていな...
-
現在時刻を取得してフォームのs...
-
リロード時もコンボボックスの...
-
フォームで開始時間と終了時間...
-
getElementsByNameについて
-
リストボックスの項目の順番を...
おすすめ情報