JavaScript と CSS を使用して、選択した要素の値に基づいて div を表示します

Question

選択した要素が対応する値を保持している場合、1 つの div を表示し、他の div を非表示にしようとしています。

4 つのオプションを持つ選択要素を作成しました。デフォルト値は空で、他の 3 つのオプションは下、上、および上です。以下に、3 つのオプション (bottom、top、top) のそれぞれのコンテンツを含む 3 つの非表示の div 要素を配置しました。選択した要素の値に基づいて各 div を表示または非表示にしたいと考えています。これは私のコードです:

リーリー リーリー リーリー

Answer 1

1. ID は一意であり、複数の要素が同じ ID を持つことはできないため、これを変更しました。
2. また、選択に基づいて要素を表示または非表示にし、必要に応じて d-none クラスを削除または追加する eventListener も追加しました。
3. あなたの if/else ステートメントも間違っています。= は代入用であり、== は比較用です。私の例のように switch case を使用することもできます。

リーリー リーリー リーリー

Answer 2

これをイベント リスナーでラップし、表示する前にすべての要素を非表示にする必要があります。

リーリー

これにより、ユーザーがオプションを選択するたびに、対応する div が表示され、残りは非表示になります。

また、JavaScript の = は代入であるため、if ステートメント内のすべての = を == に置き換える必要があります。値が true の場合、if ステートメントが実行されます。おそらく、等価比較演算子 == を探しているでしょう。

完全なクリップ:

リーリー リーリー リーリー