JavaScriptで複数のセレクトボックスが選択されたとき

2つ以上のセレクトボックスで選択が完了したとき別のTEXTのstyleを変更したいです。

実装できていること
セレクトボックスAが選択されたとき「セレクトボックスA選択されました」の文字色を変える
同じくセレクトボックスBが選択されたとき「セレクトボックスB選択されました」の文字色を変える

出来ないこと
セレクトボックスA・セレクトボックスBがともに選択されたとき「準備OK」の文字色を変えるという動きがうまくいきません。

ここに言語を入力HTML
コード<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JavaScript Basics</title>
  <style>
    .nomal{
      color: blue;
    }
    .click{
      color: red;
    }

    .yes{
      color:green;
      border: 4px ridge red;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <select onchange="changeItem()" name="" id="abc" >
    <option value="選択してください">選択してください</option>
    <option value="">北海道地区</option>
    <option value="">東北地区</option>
    <option value="">その他</option>
  </select>

  <h1 id='col' class="nomal">セレクトボックスB選択されました</h1>
  
  <select onchange="changeItem2()" name="" id="def" >
    <option value="選択してください">選択してください</option>
    <option value="">一軒家</option>
    <option value="">賃貸</option>
    <option value="">その他</option>
  </select>

  <h1 id='col2' class="nomal">セレクトボックスB選択されました</h1>
  
  <h1 id='ok' class="nomal">ok
  </h1>
  
  <script src="js/main.js"></script>


</body>
</html>

コードconst text = document.querySelector('#col');
const select = document.querySelector(`#abc`);
const text2 = document.querySelector('#col2');
const select2 = document.querySelector(`#def`);
const ok = document.querySelector('#ok');


    function changeItem(obj){
      if (select.selectedIndex === 0){
        text.className = 'nomal';
      }else{
        text.className = `click`;
      }
    }
    
    function changeItem2(obj){
      if (select2.selectedIndex === 0){
        text2.className = 'nomal';
      }else{
        text2.className = `click`;
      }
    }


  function good(){
    if(changeItem.selectedIndex !== 0  && select2.selectedIndex !== 0){
      ok.className = 'yes';
    }else{
      ok.className = 'nomal';
    }

  }

よろしくお願いいたします。

行動規範の内容に同意します

回答3件

good()がどこからも呼び出されていないようなので、changeItemとchangeItem2の一番うしろにでも追加してもいいかと。

投稿2020/03/04 03:57

mongolia

総合スコア133

suzukimanabu

2020/03/04 04:23

ありがとうございます。ご指摘の方法をどのように書くのか悩んでいるうちに別の方から、私にもわかる回答をいただいたので、そちらをベストアンサーにさせていただきました。

行動規範の内容に同意します

セレクトボックスのイベントchangeItem()とchangeItem2()の中で、good()を呼出みてみたらできませんか？

投稿2020/03/04 03:55

sleepsheep

総合スコア310

suzukimanabu

2020/03/04 04:24

行動規範の内容に同意します

ベストアンサー

JavaScript
1function good(){
2  if(changeItem.selectedIndex !== 0  && select2.selectedIndex !== 0){
3    ok.className = 'yes';
4  }else{
5    ok.className = 'nomal';
6  }
7}

上記

changeItem.selectedIndex !== 0  && select2.selectedIndex !== 0

ではなくて

select.selectedIndex !== 0  && select2.selectedIndex !== 0

では？

追記
書いてみました。

JavaScript
1function changeItem(obj){
2  if (select.selectedIndex === 0){
3    text.className = 'nomal';
4    ok.className = 'nomal';
5  }else{
6    text.className = `click`;
7    if (select2.selectedIndex !== 0){
8      ok.className = 'yes';
9    }
10  }
11}
12
13function changeItem2(obj){
14  if (select2.selectedIndex === 0){
15    text2.className = 'nomal';
16    ok.className = 'nomal';
17  }else{
18    text2.className = `click`;
19    if (select.selectedIndex !== 0){
20      ok.className = 'yes';
21    }
22  }
23}

ちなみに関係ないですが「ノーマル」は「normal」ですね…。

投稿2020/03/04 03:54

編集2020/03/04 04:08

Takumiboo

総合スコア2536

Takumiboo

2020/03/04 04:00

sleepsheepさんの回答で気が付きましたが、そもそもgood()を一度も呼び出していませんね。 changeItemの中で呼び出すのも良いですが、そもそもchangeItemやchangeItem2の中で、もう片方の選択状況をチェックして、その場でok.classNameを変更しても良いかもしれません。

suzukimanabu

2020/03/04 04:21

ありがとうございます。 changeItem.selectedIndexはごちゃごちゃいじっているうちに、変わっていました。 normalは本当に恥ずかしいです。解撤してスッキリしました。

行動規範の内容に同意します

あなたの回答