[Javascript]or演算子の扱い

Question

前提・実現したいこと

[アイテムの種類]から、スカートとズボンを選択したときに[丈]を表示したいと考えています。
コード4行目の"const flag~"で選択値がスカートorズボンの時、という風に指定したいのですがうまくいきません。ここではor演算子は使えないのでしょうか？

該当のソースコード

<script>
        window.addEventListener('DOMContentLoaded', ()=>{
        document.querySelector('select[name=kind]').addEventListener('change',e=>{
        const flg=e.target.value!=="スカート"||"ズボン";
        document.querySelector('select[name=take]').disabled=flg;
        document.querySelector('.s_take').toggleAttribute('hidden',flg);
          });
        });

     </script>

        <h3>
        <p>
        登録フォ―ム
        </p>
        <p>
        衣服を追加
        </p>
        <form action="kakunin.php" method="POST"><!--2で処理を行う-->
          <p>  
            名称
          </p>
          <p>
            <input class="name" type="text" name="name" placeholder=他のアイテムと被らないようにしよう>
          </p>
          <p>色を選択</p>
          <p>
            <select class="color" name="color">
              <option value="赤">赤系</option>
              <option value="黒">黒系</option>
              <option value="白">白系</option>
            </select>
          </p>

          <p>アイテムの種類を選択</p>
          <p>
            <select class="kind" name="kind">
              <option value="必須">下から絶対に選んでね</option>
              <option value="ズボン" >ズボン</option>
              <option value="スカート">スカート</option>
              <option value="アウター">アウター</option>
            </select>
          </p>

          <div class=s_take>
          <p>丈</p>
          <p>
            <select class="take_take" name="take">
              <option value="指定しない">指定しない</option>
              <option value="ロング">ロング</option>
              <option value="ミドル">ミドル</option>
              <option value="ショート">ショート</option>
            </select>
          </p>
          </div> 
          <input type="submit" name="confirm" value="確認する" class="button"/>
        </form>
    </h3>

Comments

[Zuishin]

> const flg=e.target.value!=="スカート"||"ズボン";

e.target.value が "スカート" ではないならば true、または true という意味になります。
つまり、常に true です。

Answer 1

const flg=e.target.value!=="スカート"||"ズボン";
↓↓↓
const flg=!["スカート","ズボン"].includes(e.target.value);

Answer 2

初学者のうちは || や && は、真偽値(条件式など)を繋げるものだ、と覚えるとよいでしょう。条件式 || "ズボン" という使い方は別の意味になるので、今回の用途には使えません。

const flg = e.target.value !== "スカート" && e.target.value !== "ズボン";
document.querySelector('select[name=take]').disabled = flg;

または

const skirtOrPants = e.target.value === "スカート" || e.target.value === "ズボン";
document.querySelector('select[name=take]').disabled = !skirtOrPants;

Comments

[maisumakun]

> || "ズボン" という使い方はしません。

回答の趣旨と違う部分になりますが、「左辺が偽なら右辺の値にする」という意味で、「|| + 定数」のコードは使いうるので、その旨がわかるような書き方のほうがいいかも知れないと思いました。

[int32_t]

たしかに、「しません」は言い過ぎですね。修正します。