Issue with clicking and toggling classes in Javascript

Question

Issue with clicking and toggling classes in Javascript

I am experimenting with creating a simple 3 slide slider, but I am facing some issues with the JavaScript. My goal is to have the current slider slide out and the selected one slide in when clicking on the slider color. I'm attempting to achieve this by adding an active class to the clicked slider number for display. However, I can't seem to pinpoint where I went wrong. I prefer not to use jQuery as I want to practice vanilla JavaScript.

Thank you in advance!

window.onload = onPageLoad();

function onPageLoad() {
  document.querySelector('.red').classList.add('active');
};

document.querySelector('.box').addEventListener('click', function() {
  document.querySelector('.red').classList.toggle('active');
  document.querySelector('.green').classList.toggle('active');
  document.querySelector('.yellow').classList.toggle('active');
});

* {
  padding: 0;
  margin: 0;
}

.main__wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
/* CSS styles continue... */

<div class="main__wrapper">
  <section class="red"></section>
  <section class="green"></section>
  <section class="yellow"></section>

  <div class="slide__select">
    <div class="box"><span>red</span></div>
    <div class="box"><span>green</span></div>
    <div class="box"><span>yellow</span></div>
  </div>
</div>

javascript html css

Answer 1

Answer №1

The event listener is only being applied to the initial box, causing a toggling of the active class for each subsequent box leading to a yellow background on the final box.

Using querySelector will return the first DOM element found, which in this case is the red box.

To achieve the desired functionality, event listeners need to be added to each individual box using querySelectorAll.

Answer 2

The event listener is only being applied to the initial box, causing a toggling of the active class for each subsequent box leading to a yellow background on the final box.

Using querySelector will return the first DOM element found, which in this case is the red box.

To achieve the desired functionality, event listeners need to be added to each individual box using querySelectorAll.

Answer 3

Answer №2

window.onload = onPageLoad();

function onPageLoad() {
  document.querySelector('.red').classList.add('active');
};

document.querySelector('.redbox').addEventListener('click', function() {
  document.querySelector('.red').classList.add('active');
  document.querySelector('.green').classList.remove('active');
  document.querySelector('.yellow').classList.remove('active');
});
document.querySelector('.greenbox').addEventListener('click', function() {
  document.querySelector('.red').classList.remove('active');
  document.querySelector('.green').classList.add('active');
  document.querySelector('.yellow').classList.remove('active');
});
document.querySelector('.yellowbox').addEventListener('click', function() {
  document.querySelector('.red').classList.remove('active');
  document.querySelector('.green').classList.remove('active');
  document.querySelector('.yellow').classList.add('active');
});

* {
  padding: 0;
  margin: 0;
}

.main__wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.red,
.green,
.yellow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transform: translateX(-100%);
  transition: transform 1.2s;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.active {
  transform: translateX(0) !important;
  transition: transform 1s !important;
}

.slide__select {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  height: 20%;
  z-index: 10;
  display: flex;
}

.box {
  position: relative;
  flex: 1 0 0;
  color: $color-white;
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: #A68D71;
}

.box span {
  display: block;
  position: relative;
  z-index: 11;
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: yellow;
  width: 100%;
  height: 0;
  transition: height .3s;
}

.box:hover::after {
  height: 100%;
  transition: height .3s;
}

<div class="main__wrapper">

  <section class="red">

  </section>

  <section class="green">

  </section>

  <section class="yellow">

  </section>

  <div class="slide__select">
    <div class="redbox box">
      <span>red</span>
    </div>
    <div class="greenbox box">
      <span>green</span>
    </div>
    <div class="yellowbox box">
      <span>yellow</span>
    </div>
  </div>

</div>

Here is a comprehensive example solution. It may seem lengthy, but it effectively demonstrates the necessary functionality. This code can be simplified.

To streamline the code, all three listeners could be combined into just one listener targeting the .box selector. To determine which box was clicked, consider using a data attribute or parsing the html text. Using a data attribute would enhance code clarity and separation of concerns. However, either approach will accomplish the desired outcome.

Answer 4

window.onload = onPageLoad();

function onPageLoad() {
  document.querySelector('.red').classList.add('active');
};

document.querySelector('.redbox').addEventListener('click', function() {
  document.querySelector('.red').classList.add('active');
  document.querySelector('.green').classList.remove('active');
  document.querySelector('.yellow').classList.remove('active');
});
document.querySelector('.greenbox').addEventListener('click', function() {
  document.querySelector('.red').classList.remove('active');
  document.querySelector('.green').classList.add('active');
  document.querySelector('.yellow').classList.remove('active');
});
document.querySelector('.yellowbox').addEventListener('click', function() {
  document.querySelector('.red').classList.remove('active');
  document.querySelector('.green').classList.remove('active');
  document.querySelector('.yellow').classList.add('active');
});

* {
  padding: 0;
  margin: 0;
}

.main__wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.red,
.green,
.yellow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transform: translateX(-100%);
  transition: transform 1.2s;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.active {
  transform: translateX(0) !important;
  transition: transform 1s !important;
}

.slide__select {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  height: 20%;
  z-index: 10;
  display: flex;
}

.box {
  position: relative;
  flex: 1 0 0;
  color: $color-white;
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: #A68D71;
}

.box span {
  display: block;
  position: relative;
  z-index: 11;
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: yellow;
  width: 100%;
  height: 0;
  transition: height .3s;
}

.box:hover::after {
  height: 100%;
  transition: height .3s;
}

<div class="main__wrapper">

  <section class="red">

  </section>

  <section class="green">

  </section>

  <section class="yellow">

  </section>

  <div class="slide__select">
    <div class="redbox box">
      <span>red</span>
    </div>
    <div class="greenbox box">
      <span>green</span>
    </div>
    <div class="yellowbox box">
      <span>yellow</span>
    </div>
  </div>

</div>

Here is a comprehensive example solution. It may seem lengthy, but it effectively demonstrates the necessary functionality. This code can be simplified.

To streamline the code, all three listeners could be combined into just one listener targeting the .box selector. To determine which box was clicked, consider using a data attribute or parsing the html text. Using a data attribute would enhance code clarity and separation of concerns. However, either approach will accomplish the desired outcome.

Answer 5

Answer №3

Here's a more concise solution:

window.onload = onPageLoad();

function onPageLoad() {
  document.querySelector('.red').classList.add('active');
};

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener('click', toggleSections);
}

var colors = ['red', 'green', 'yellow'];

function toggleSections(ev) {
  var color = ev.currentTarget.innerText;
  for (var c = 0; c < colors.length; c++) {
    var colorElem = document.querySelector('.' + colors[c]);
    if (colors[c] != color) {
      colorElem.classList.remove('active');
    } else {
      colorElem.classList.add('active');
    }
  }
}

* {
  padding: 0;
  margin: 0;
}

.main__wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.red,
.green,
.yellow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transform: translateX(-100%);
  transition: transform 1.2s;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.active {
  transform: translateX(0) !important;
  transition: transform 1s !important;
}

.slide__select {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  height: 20%;
  z-index: 10;
  display: flex;
}

.box {
  position: relative;
  flex: 1 0 0;
  color: $color-white;
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: #A68D71;
}

.box span {
  display: block;
  position: relative;
  z-index: 11;
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: yellow;
  width: 100%;
  height: 0;
  transition: height .3s;
}

.box:hover::after {
  height: 100%;
  transition: height .3s;
}

<div class="main__wrapper">

  <section class="red">

  </section>

  <section class="green">

  </section>

  <section class="yellow">

  </section>

  <div class="slide__select">
    <div class="box">
      <span>red</span>
    </div>
    <div class="box">
      <span>green</span>
    </div>
    <div class="box">
      <span>yellow</span>
    </div>
  </div>

</div>

Answer 6

Here's a more concise solution:

window.onload = onPageLoad();

function onPageLoad() {
  document.querySelector('.red').classList.add('active');
};

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener('click', toggleSections);
}

var colors = ['red', 'green', 'yellow'];

function toggleSections(ev) {
  var color = ev.currentTarget.innerText;
  for (var c = 0; c < colors.length; c++) {
    var colorElem = document.querySelector('.' + colors[c]);
    if (colors[c] != color) {
      colorElem.classList.remove('active');
    } else {
      colorElem.classList.add('active');
    }
  }
}

* {
  padding: 0;
  margin: 0;
}

.main__wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.red,
.green,
.yellow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transform: translateX(-100%);
  transition: transform 1.2s;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.active {
  transform: translateX(0) !important;
  transition: transform 1s !important;
}

.slide__select {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  height: 20%;
  z-index: 10;
  display: flex;
}

.box {
  position: relative;
  flex: 1 0 0;
  color: $color-white;
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: #A68D71;
}

.box span {
  display: block;
  position: relative;
  z-index: 11;
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: yellow;
  width: 100%;
  height: 0;
  transition: height .3s;
}

.box:hover::after {
  height: 100%;
  transition: height .3s;
}

<div class="main__wrapper">

  <section class="red">

  </section>

  <section class="green">

  </section>

  <section class="yellow">

  </section>

  <div class="slide__select">
    <div class="box">
      <span>red</span>
    </div>
    <div class="box">
      <span>green</span>
    </div>
    <div class="box">
      <span>yellow</span>
    </div>
  </div>

</div>

Answer 7

Answer №4

To get the desired outcome, consider the following options:

Use a single section to prevent multiple loops of section elements
Instead of using querySelector, opt for querySelectorAll or elementsByClassName to retrieve all elements in an array
Utilize forEach to iterate through all elements with the class "box", add an event listener and then run another loop using forEach for span elements
Employ classList to add or remove classes

window.onload = onPageLoad();

function onPageLoad() {
  document.querySelector('.red').classList.add('active');
};

// use querySelectorAll to get all elements of class-box and forEach to loop through
document.querySelectorAll('.box').forEach(function(ele){
  //Add clici event through addEventListener
  ele.addEventListener('click', function() {
// use another querySelectorAll to get all elements of tag span and forEach to loop through
document.querySelectorAll('span').forEach(function(e){
  e.classList.remove('active');
  //use querySelector for section element and empty classList to remove active and red/green/yellow class names
  document.querySelector('section').className ='';
});
//toggle active class for clicked element
ele.children[0].classList.toggle("active");
//add active class for section
document.querySelector('section').classList.add('active');
//add class red/yellow/green using span innerHTML
document.querySelector('section').classList.add(ele.children[0].innerHTML);
 });
});

* {
  padding: 0;
  margin: 0;
}

.main__wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.red,
.green,
.yellow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transform: translateX(-100%);
  transition: transform 1.2s;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.active {
  transform: translateX(0) !important;
  transition: transform 1s !important;
}

.slide__select {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  height: 20%;
  z-index: 10;
  display: flex;
}

.box {
  position: relative;
  flex: 1 0 0;
  color: $color-white;
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: #A68D71;
}

.box span {
  display: block;
  position: relative;
  z-index: 11;
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: yellow;
  width: 100%;
  height: 0;
  transition: height .3s;
}

.box:hover::after {
  height: 100%;
  transition: height .3s;
}

<div class="main__wrapper">

  <section class="red">

  </section>
  <div class="slide__select">
    <div class="box">
      <span>red</span>
    </div>
    <div class="box">
      <span>green</span>
    </div>
    <div class="box">
      <span>yellow</span>
    </div>
  </div>

</div>

For more details on the code sample provided, visit: https://codepen.io/nagasai/pen/vRoPwp

Answer 8

To get the desired outcome, consider the following options:

Use a single section to prevent multiple loops of section elements
Instead of using querySelector, opt for querySelectorAll or elementsByClassName to retrieve all elements in an array
Utilize forEach to iterate through all elements with the class "box", add an event listener and then run another loop using forEach for span elements
Employ classList to add or remove classes

window.onload = onPageLoad();

function onPageLoad() {
  document.querySelector('.red').classList.add('active');
};

// use querySelectorAll to get all elements of class-box and forEach to loop through
document.querySelectorAll('.box').forEach(function(ele){
  //Add clici event through addEventListener
  ele.addEventListener('click', function() {
// use another querySelectorAll to get all elements of tag span and forEach to loop through
document.querySelectorAll('span').forEach(function(e){
  e.classList.remove('active');
  //use querySelector for section element and empty classList to remove active and red/green/yellow class names
  document.querySelector('section').className ='';
});
//toggle active class for clicked element
ele.children[0].classList.toggle("active");
//add active class for section
document.querySelector('section').classList.add('active');
//add class red/yellow/green using span innerHTML
document.querySelector('section').classList.add(ele.children[0].innerHTML);
 });
});

* {
  padding: 0;
  margin: 0;
}

.main__wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.red,
.green,
.yellow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transform: translateX(-100%);
  transition: transform 1.2s;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.active {
  transform: translateX(0) !important;
  transition: transform 1s !important;
}

.slide__select {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  height: 20%;
  z-index: 10;
  display: flex;
}

.box {
  position: relative;
  flex: 1 0 0;
  color: $color-white;
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: #A68D71;
}

.box span {
  display: block;
  position: relative;
  z-index: 11;
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: yellow;
  width: 100%;
  height: 0;
  transition: height .3s;
}

.box:hover::after {
  height: 100%;
  transition: height .3s;
}

<div class="main__wrapper">

  <section class="red">

  </section>
  <div class="slide__select">
    <div class="box">
      <span>red</span>
    </div>
    <div class="box">
      <span>green</span>
    </div>
    <div class="box">
      <span>yellow</span>
    </div>
  </div>

</div>

For more details on the code sample provided, visit: https://codepen.io/nagasai/pen/vRoPwp

Issue with clicking and toggling classes in Javascript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the method to retrieve JSON data with data['file.file']?

The div element is unable to activate the modal due to tabindex issues

.click function failing to trigger on dynamically loaded form

What could be causing the malfunction in my Bootstrap navbar?

Enabling auto-expansion for textareas with every keystroke

What is the best way to set a value for a variable within a UI component in React?

My objective is to upload a video file and store it on the server using multer

What is the best way to combine relative paths or create distinct identifiers for SVG files located within multiple layers of folders

Is it allowed to use any AngularJS directives within other directives?

There is an error in ReactJS: TypeError - _this.props.match is not defined

Alter Text Using Typewriter

Angular: seamlessly transferring all directives from parent component to child without interference

Is the format of this HTML tag correct?

What is preventing me from generating a string for transform:translate within Angular.js?

Automatically select a radio button upon loading the page

I'm attempting to render HTML emails in ReactJS

The code encountered an error with message TS2345 stating that the argument type '(a: Test, b: Test) => boolean | 1' cannot be assigned to a parameter type of '(a: Test, b: Test) => number'

How can I retrieve the name of the upcoming middleware function in Express.JS?

Struggling to generate package using manifoldjs

Styling a Pie or Doughnut Chart with CSS