JSによるcssの追加

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 72

YESYUKI17

score 6

前提・実現したいこと

該当のソースコード

'use strict';
{


  const name = document.getElementsByName('c');
  const title = document.getElementsByName('d');

  function checkbox() {
    for (let i = 0; i < name.length; i++) {
      if (name[i].checked) {
        tabs[1].classList.add('back-color');
        // カテゴリーのいずれかをチェックしたらジオグラフィーがアクティブになる
        for (let i = 0; i < title.length; i++) {
          if (title[i].checked) {
            const search = document.getElementById('search');
            search.classList.add('next');
            // 全部チェックが外れたらクラスを外す方法
          }
        }
      }
    }
  }

    window.addEventListener('DOMContentLoaded', ()=>{
      [].forEach.call(document.querySelectorAll('.input'),x=>{
        x.addEventListener('change',()=>{
          let c=[].map.call(document.querySelectorAll('.input:checked'), x=> x.value);
          document.querySelector('.reflect').textContent=c.join(",");
          checkbox();
        });
      });
    });

    window.addEventListener('DOMContentLoaded', ()=>{
      [].forEach.call(document.querySelectorAll('.input2'),x=>{
        x.addEventListener('change',e=>{
          let d=[].map.call(document.querySelectorAll('.input2:checked'),x=>x.value);
          document.querySelector('.reflect2').textContent=d.join(",");
          checkbox();
        });
      });
    });

  // タブの切り替え
    let tabs = document.getElementsByClassName('tab');
    for (let i = 0; i < tabs.length; i++) {
      tabs[i].addEventListener('click', tabSwitch, false);
    }

    function tabSwitch() {
      document.getElementsByClassName('comeup')[0].classList.remove('comeup');
      document.getElementsByClassName('comeup2')[0].classList.remove('comeup2');
      tabs = Array.prototype.slice.call(tabs);
      const index = tabs.indexOf(this);
      document.getElementsByClassName('switch-list')[index].classList.add('comeup');
      document.getElementsByClassName('box')[index].classList.add('comeup2');
    }


}
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Practice</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <div class="main-contents">
      <div class="tab-tab">
        <div class="tab">
          カテゴリー1タブ
        </div>
        <div class="tab">
          カテゴリー2タブ
        </div>
        <div id="search">search</div>
      </div>
      <div class="switch-menu">

        <div class="window">
          <p class="reflect box comeup2"></p>
          <p class="reflect2 box"></p>
        </div>
      </div>


      <div class="tree">
        <div id="allList">

          <div id="categoryList" class="switch-list comeup">
            <div class="category">
              <!-- INDUSTRY階層 -->
              <div class="industry-choice">
                <h5>カテゴリー1</h5>
              </div>

                <!-- 第一階層 -->
              <div class="industry-list hidden">
              <div class="flex">
                <label><input type="checkbox" name="c" value="xx" class="input">xx</label>
              </div>
                <!-- ここに入れ子を追加 -->
                <!-- 第二階層 -->
                <div class="industry-list hidden">
                  <div class="flex">
                    <label><input type="checkbox" name="c" value="yy" class="input">yy</label>
                  </div>
                  <!-- ここに入れ子を追加 -->
                  <!-- 第三階層 -->
                  <div class="industry-list hidden">
                    <div class="flex">
                      <label><input type="checkbox" name="c" value="zz" class="input">zz</label>
                    </div>
                    <!-- ここに入れ子を追加 -->
                  </div>
                </div>
              </div>

            </div>
            </div>

            <div id="geographyList" class="switch-list">
              <p>カテゴリー2</p>
              <label><input type="checkbox" name="d" value="aa" class="input2">aa</label>
            </div>

          </div>
        </div>

      </div>
    </div>



    <script src="js/main.js"></script>

  </body>
</html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/09/11 21:04

    (質問文は編集できます)「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

    キャンセル

  • 退会済みユーザー

    2019/09/13 00:28

    複数のユーザーから「問題・課題が含まれていない質問」という意見がありました
    teratailでは、漠然とした興味から票を募るような質問や、意見の主張をすることを目的とした投稿は推奨していません。
    「編集」ボタンから編集を行い、質問の意図や解決したい課題を明確に記述していただくと回答が得られやすくなります。

回答 1

check解決した方法

-4

エラーが出たみたいです。再度投稿します。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる