javascript ２つのセレクトボックスを全て選択されていないと、「テキストによるエラーメッセージを表示させるコード」を調べています。該当コードは ■■四角の記号の部分です。セレクトボックスを２つとも未選択でsubmitを押すと、アラートのメッセージとテキストエラーによるメッセージ２つが同時に表示されるようになっています。コードはきちんと起動します。該当部分のdocument.querySelector('.err')?.remove();の意味が理解できずにいます。 insertAdjacentHTMLで出したテキストエラーをセレクトボックスが空欄でない時に非表示にするとい解釈のようですが、あってますでしょうか？ class名やid名に('.err')?という名前は使用していませんがドットに.errとクエスチョンマーク？とはどういう意味なのでしょうか？条件演算子の？でしょうか条件演算子の構文で変数 = 条件 ? 値１ : 値２;の構文とも違うようですし。分からずにいます。回答よろしくお願いいたします。 ---HTMLのコード--- 選択項目①：果物を選択する >リンゴ選択項目②：食事を選択する >ごはん ---javascriptののコード--- 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); } }); ■■ // ２つとも全て選択されてないとテキストによるエラーメッセージの表示 form.addEventListener('submit', e=>{ document.querySelector('.err')?.remove(); document.querySelector('.alert15').insertAdjacentHTML('afterend',` ※選択項目①と選択項目②を全て選択して下さい。 `); },true);

2020年に新しく導入された演算子 "?." です https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining 一般的な説明 https://ja.wikipedia.org/wiki/Null%E6%9D%A1%E4%BB%B6%E6%BC%94%E7%AE%97%E5%AD%90 同じ意味になる様に書き換えるならば document.querySelector('.err')?.remove() ↓ var e = document.querySelector('.err'); if (e) { e.remove(); }

セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています

解決済

質問者：hayosato
質問日時：2023/06/22 15:48
回答数：2件

javascript　２つのセレクトボックスを全て選択されていないと、「テキストによるエラーメッセージを表示させるコード」を調べています。
該当コードは<script>■■四角の記号の部分です。

セレクトボックスを２つとも未選択でsubmitを押すと、アラートのメッセージとテキストエラーによるメッセージ２つが同時に表示されるようになっています。
コードはきちんと起動します。

該当部分のdocument.querySelector('.err')?.remove();の意味が理解できずにいます。
insertAdjacentHTMLで出したテキストエラーをセレクトボックスが空欄でない時に非表示にするとい解釈のようですが、あってますでしょうか？

class名やid名に('.err')?という名前は使用していませんがドットに.errとクエスチョンマーク？とはどういう意味なのでしょうか？
条件演算子の？でしょうか条件演算子の構文で変数 = 条件 ? 値１ : 値２;の構文とも違うようですし。

分からずにいます。回答よろしくお願いいたします。

---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>

<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>
// ２つとも全て選択されてないとテキストによるエラーメッセージの表示
form.addEventListener('submit', e=>{
document.querySelector('.err')?.remove();
document.querySelector('.alert15').insertAdjacentHTML('afterend',`<span class="err">※選択項目①と選択項目②を全て選択して下さい。</span>`);
},true);

</script>

</body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2023/06/22 17:06

こんにちは

＞insertAdjacentHTMLで出したテキストエラーをセレクトボックスが空欄でない
＞時に非表示にするとい解釈のようですが、あってますでしょうか？
違っています。
「セレクトボックスが空欄でない時」の判断は行っていません。
また、「非表示にする」のではなく要素をＤＯＭから削除しています。
（次に、追加すると重複するので）

ご質問の部分は、メッセージの表示に関する処理だけを行っていますので、セレクトボックスの内容の判断やFormの送信を制御してはいません。
「Submitされたら、無条件でメッセージを表示する」という内容になっています。
スクリプトをその部分だけにしてみれば、どのような状態でも常にメッセージを表示し、送信してしまうことを確認できると思います。
内容的には、まったく同じメッセージを削除したり、また追加したりと、あまり効率が良いとは言えない処理を行っているように見えます。

　document.querySelector('.alert15').textContent = '固定メッセージ';
という1行でも済ませられる内容ですから・・
（↑だと、文書構造的には少し変わりますけれど・・）
もっと言うなら、両方のスクリプトを使おうというのであれば、イベント処理をわざわざ二つに分けて設定する必要があるとも思えません。

ちなみに
＞document.querySelector('.err')?.remove();
は、「オプショナルチェーン」と言われる演算子を利用した記法で、この場合は「クラスerrの要素」(=最初は存在しない）が存在すれば削除し、しなければ処理を中断してundefinedを返すということになります。
https://developer.mozilla.org/ja/docs/Web/JavaSc …
（存在しない場合（最初だけですが）に、エラーになるのを防止する目的と推測します）

- 1
- 件

通報する

この回答へのお礼

わかりやすい回答ありがとうございました。感謝いたします。

通報する

お礼日時：2023/06/23 17:48

No.1

回答者： Ogre7077
回答日時：2023/06/22 16:35

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(); }