Get elements by class-name but not changing all elements with this class at click-CodePudding

I want to change the "key-selector" (e.g. "A","B" etc)color of the respectively clicked element. When I am clicking on a option block only the background color of the respectively block is changing like desired but the color of the "key-selector" is undesired changing in every block and not only of the clicked one, I do not understand why. Why is that not working and how can I implement this? (Look at my JS)

window.onload = function() {
  const option = document.getElementsByClassName("button");
  const keySelector = document.getElementsByClassName("key-selector");
  let i = true;
  const forward = document.getElementById("forward");

  Array.from(option).forEach(function(option) {
    option.addEventListener("click", () => {
      if (i) {

        option.style.backgroundColor = "rgb(77, 55, 120)";
        option.style.opacity = "0.65";
        option.style.color = "white";

        Array.from(keySelector).forEach(function(keySelector) {
          keySelector.style.color = "white";

          forward.style.color = "white";
          forward.style.backgroundColor = "rgb(77, 55, 120)";
          forward.style.transition = "1s ease";
          i = false;
        });
      } else if (!i) {
        option.style.backgroundColor = "rgb(226, 226, 226)";
        i = true;
      }
    });
  });
};

.navbar {
  display: flex;
  list-style: none;
  background-color: rgb(77, 55, 120);
  margin: 0;
  position: fixed;
  width: 100%;
  gap: 4rem;
  height: 50px;
  text-align: center;
  line-height: 45px;
  left: 0;
  top: 0;
}

.nav-text {
  text-decoration: none;
  color: white;
  width: auto;
  cursor: pointer;
  font-size: 18px;
}

.options {
  height: auto;
  max-height: 313px;
  max-width: 750px;
  width: auto;
  padding-top: 150px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: sticky;
  left: 8rem;
}

.button {
  background-color: rgb(226, 226, 226);
  height: 418.75%;
  width: auto;
  padding: 21px 25px 22px 25px;
  box-sizing: border-box;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  line-height: 16.8px;
  display: block;
  position: relative;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
}

.button:checked {
  color: red;
}

.text {
  margin-left: 4rem;
}

.button:hover {
  /*background-color: rgb(116, 181, 218);*/
  background-color: rgb(77, 55, 120);
  opacity: 0.65;
  color: white;
}

#backward:hover,
#forward:hover {
  background-color: rgb(77, 55, 120);
  color: white;
}

.key-selector {
  position: absolute;
  top: 50%;
  margin-top: -12px;
  font-size: 16px;
  line-height: 1.5em;
  text-align: center;
  width: 30px;
  display: block;
  opacity: 0.6;
  border: 1px solid;
  border-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  height: 25px;
  color: #333;
}

.button:hover .key-selector {
  color: white;
}

.button-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  margin: 0;
  left: 0;
}

.nav-inner {
  cursor: pointer;
  width: 50%;
  text-align: center;
  line-height: 83px;
}

#backward {
  background-color: rgb(101, 93, 93);
  color: white;
}

#forward {
  background-color: rgb(191, 191, 191);
}

<body>
  <ul >
    <li ><a  href="client.html">Mandant</a></li>
    <li ><a  href="case.html">Anliegen</a></li>
  </ul>
  <div >
    <div >
      <div >
        <div >
          <span>A</span>
        </div>
        <div >0</div>
      </div>

    </div>

    <div >
      <div >
        <div >
          <span>B</span>
        </div>
        <div >1</div>
      </div>


    </div>

    <div >
      <div >
        <div >
          <span>C</span>
        </div>
        <div >2</div>
      </div>

    </div>

    <div >
      <div >
        <div >
          <span>D</span>
        </div>
        <div >3</div>
      </div>

    </div>

    <div >
      <div >
        <div >
          <span>E</span>
        </div>
        <div >4</div>
      </div>

    </div>
  </div>


  <div >
    <div  id="backward">
      < Zurück</div>
        <div  id="forward"> Weiter ></div>
    </div>

  </div>
</body>

CodePudding user response：

The loop ``Array.from(keySelector).forEach(...)changes the color of all thekey-selector` elements, not just the one related to the button that they clicked on.

It should just find the .key-selector element within the current button, and change that.

window.onload = function() {
  const option = document.getElementsByClassName("button");
  let i = true;
  const forward = document.getElementById("forward");

  Array.from(option).forEach(function(option) {
    option.addEventListener("click", () => {
      if (i) {

        option.style.backgroundColor = "rgb(77, 55, 120)";
        option.style.opacity = "0.65";
        option.style.color = "white";
        let keySelector = option.querySelector(".key-selector");
        keySelector.style.color = "white";

        forward.style.color = "white";
        forward.style.backgroundColor = "rgb(77, 55, 120)";
        forward.style.transition = "1s ease";
        i = false;

      } else if (!i) {
        option.style.backgroundColor = "rgb(226, 226, 226)";
        i = true;
      }
    });
  });
};

.navbar {
  display: flex;
  list-style: none;
  background-color: rgb(77, 55, 120);
  margin: 0;
  position: fixed;
  width: 100%;
  gap: 4rem;
  height: 50px;
  text-align: center;
  line-height: 45px;
  left: 0;
  top: 0;
}

.nav-text {
  text-decoration: none;
  color: white;
  width: auto;
  cursor: pointer;
  font-size: 18px;
}

.options {
  height: auto;
  max-height: 313px;
  max-width: 750px;
  width: auto;
  padding-top: 150px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: sticky;
  left: 8rem;
}

.button {
  background-color: rgb(226, 226, 226);
  height: 418.75%;
  width: auto;
  padding: 21px 25px 22px 25px;
  box-sizing: border-box;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  line-height: 16.8px;
  display: block;
  position: relative;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
}

.button:checked {
  color: red;
}

.text {
  margin-left: 4rem;
}

.button:hover {
  /*background-color: rgb(116, 181, 218);*/
  background-color: rgb(77, 55, 120);
  opacity: 0.65;
  color: white;
}

#backward:hover,
#forward:hover {
  background-color: rgb(77, 55, 120);
  color: white;
}

.key-selector {
  position: absolute;
  top: 50%;
  margin-top: -12px;
  font-size: 16px;
  line-height: 1.5em;
  text-align: center;
  width: 30px;
  display: block;
  opacity: 0.6;
  border: 1px solid;
  border-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  height: 25px;
  color: #333;
}

.button:hover .key-selector {
  color: white;
}

.button-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  margin: 0;
  left: 0;
}

.nav-inner {
  cursor: pointer;
  width: 50%;
  text-align: center;
  line-height: 83px;
}

#backward {
  background-color: rgb(101, 93, 93);
  color: white;
}

#forward {
  background-color: rgb(191, 191, 191);
}

<body>
  <ul >
    <li ><a  href="client.html">Mandant</a></li>
    <li ><a  href="case.html">Anliegen</a></li>
  </ul>
  <div >
    <div >
      <div >
        <div >
          <span>A</span>
        </div>
        <div >0</div>
      </div>

    </div>

    <div >
      <div >
        <div >
          <span>B</span>
        </div>
        <div >1</div>
      </div>


    </div>

    <div >
      <div >
        <div >
          <span>C</span>
        </div>
        <div >2</div>
      </div>

    </div>

    <div >
      <div >
        <div >
          <span>D</span>
        </div>
        <div >3</div>
      </div>

    </div>

    <div >
      <div >
        <div >
          <span>E</span>
        </div>
        <div >4</div>
      </div>

    </div>
  </div>


  <div >
    <div  id="backward">
      < Zurück</div>
        <div  id="forward"> Weiter ></div>
    </div>

  </div>
</body>