Search code examples
javascriptbackgroundtoggleaddeventlistenerqueryselector

addEventListener/querySelector/Toggle - need help changing color but deselecting other tab

// Desktop View
const content1 = document.querySelector('#tab-1');
content1.addEventListener('click', (e) => {
  document.querySelector('.dropdown-1').classList.toggle('hide');
  document.querySelector('.dropdown-2').classList.remove('hide');
  document.querySelector('.dropdown-3').classList.remove('hide');
  document.querySelector('.fitguide').classList.toggle('darkBG');
  document.querySelector('.fitguide a').classList.toggle('lightText');
});

The above is my JavaScript for this section I am having issues with. When I select a tab, the background and text colors change, as they are supposed to, but when I select another tab, the previously selected tab does not deselect and change back to normal. I am talking about the last two toggle lines of code here. My CSS for them :

 .darkBG {
    background: black;
  }

  .lightText {
    color: white;
  }

I have tried a lot of things to try and fix this, but I just keep getting no text, only background change. I want to do it with JavaScript but can do it in the CSS if necessary. Does anybody have fresh eyes, experience with this issue?

Solution

  • We are missing the HTML part. However, we can play with this. I think it's somethin like this that you would like.

    const content1 = document.querySelector('#tab-1');
content1.addEventListener('click', (event) => {
  let targetElement = event.target;

  for (let element of content1.children) {
    if (element === targetElement) {
      element.classList.remove("deselected");
      element.classList.add("selected");
      continue;
    }
    element.classList.add("deselected")
  }

});
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST STACKOVERFLOW</title>
    <style>
        .darkBG {
            background: black;
        }

        .lightText {
            color: white;
        }

        .dropdown-1{
            border: 1px solid black;
        }
        .dropdown-2{
            border: 1px solid black;
        }
        .dropdown-3{
            border: 1px solid black;
        }

        .selected{
            background-color: aquamarine;
        }
        .deselected{
            background-color: black;
        }

        #tab-1 div{
            width: 50px;
            height: 50px;
            margin: 5px;
        }
    

  
    </style>
</head>

<body>
    <div id="tab-1">
        <div id="1" class="dropdown-1"></div>
        <div id="2" class="dropdown-2"></div>
        <div id="3" class="dropdown-3"></div>
    </div>
    <script src="./stackoverflow.js"></script>
</body>

</html>

    Click on any of the squares that you will notice that the css will be applied to the element that you clicked. Be aware in the targetElement that is the clicked element. There are many solutions for this case, but it's a begin