Switch background color multiple times on click using JavaScript loop

Question

Switch background color multiple times on click using JavaScript loop

Hello amazing people!

I have a container with 52 small boxes and one large box containing a letter. The smaller boxes are arranged around the larger one using CSS grid, and when hovered over, they turn light grey.

My Objective

When any of the 52 small boxes are clicked, the background should first turn green. If clicked again on the same box, it should turn red. While the color is red or green, the hover effect (grey) should be disabled. Clicking for a third time will reset the background to white, re-enabling the grey hover option. Additionally, each box has a data property called "defaultWhite" that I want to change to red or green or back to defaultWhite upon clicking, as the data will later be exported to an excel document.

As I plan to export this data, any assistance in achieving the desired color changes and data updates while clicking would be greatly appreciated! :)

javascript jquery html css

Answer 1

Answer №1

The first step is understanding that the id attribute must be unique for each element, while the class attribute can be reused. Consider swapping your classes and ids.

To manage different states, it's recommended to use distinct classes for each state and toggle between them upon click events.

const changeColor = document.getElementsByClassName('changeColor');

Array.from(changeColor).forEach(function(element) {
  element.addEventListener('click', function(event) {
  item = event.target;
    
    if (item.classList.contains('green')) {
        item.classList.remove('green');
        item.classList.add('red');
    } else if(item.classList.contains('red')) {
        item.classList.remove('red');
        item.classList.add('enableHover');
    } else {
        item.classList.add('green');
        item.classList.remove('enableHover');
    }
  });
});

/* Your CSS code here */

Your HTML structure goes here as well.

Answer 2

The first step is understanding that the id attribute must be unique for each element, while the class attribute can be reused. Consider swapping your classes and ids.

To manage different states, it's recommended to use distinct classes for each state and toggle between them upon click events.

const changeColor = document.getElementsByClassName('changeColor');

Array.from(changeColor).forEach(function(element) {
  element.addEventListener('click', function(event) {
  item = event.target;
    
    if (item.classList.contains('green')) {
        item.classList.remove('green');
        item.classList.add('red');
    } else if(item.classList.contains('red')) {
        item.classList.remove('red');
        item.classList.add('enableHover');
    } else {
        item.classList.add('green');
        item.classList.remove('enableHover');
    }
  });
});

/* Your CSS code here */

Your HTML structure goes here as well.

Answer 3

Answer №2

It is not allowed to have multiple elements in a document with the same id value.

Using the 'starts with' selector on individual class names can resolve this issue. This method allows for selecting all elements with classes starting with "^she".

When applying a style to the clicked element, the $(this) selector can be used to target the specific element that was clicked.

An object similar to a map can be utilized to store the current state of the clicked element. Using a unique key like "class" ensures differentiation between each element.

const changeColor = document.getElementById('changeColor'),
  colors = ['green', 'red', 'white'];
let colorIndex = 0;
let map = {};
$('[class^="she"]').on('click', function() {
  let classN = $(this).attr('class');
  map[classN] = map[classN] || 0;
  colorIndex = (map[classN]) % colors.length;
  $(this).css("backgroundColor", colors[colorIndex]);
  ++map[classN];
});

html {
  -webkit-font-smoothing: antialiased;
}

body {
  background: #fff;
  margin: 0 auto;
  padding: 1em;
}

.generalWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: ;
  position:
}

... (CSS code truncated for brevity)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<div class="generalWrapper">
  <div class="boxes-container">
    <div class="grid-container">
      ... (HTML code truncated for brevity)
    </div>
  </div>
</div>

Answer 4

It is not allowed to have multiple elements in a document with the same id value.

Using the 'starts with' selector on individual class names can resolve this issue. This method allows for selecting all elements with classes starting with "^she".

When applying a style to the clicked element, the $(this) selector can be used to target the specific element that was clicked.

An object similar to a map can be utilized to store the current state of the clicked element. Using a unique key like "class" ensures differentiation between each element.

const changeColor = document.getElementById('changeColor'),
  colors = ['green', 'red', 'white'];
let colorIndex = 0;
let map = {};
$('[class^="she"]').on('click', function() {
  let classN = $(this).attr('class');
  map[classN] = map[classN] || 0;
  colorIndex = (map[classN]) % colors.length;
  $(this).css("backgroundColor", colors[colorIndex]);
  ++map[classN];
});

html {
  -webkit-font-smoothing: antialiased;
}

body {
  background: #fff;
  margin: 0 auto;
  padding: 1em;
}

.generalWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: ;
  position:
}

... (CSS code truncated for brevity)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<div class="generalWrapper">
  <div class="boxes-container">
    <div class="grid-container">
      ... (HTML code truncated for brevity)
    </div>
  </div>
</div>

Answer 5

Answer №3

Encountering a JavaScript issue is not uncommon, and the use of document.getElementById often results in only one record being returned, preventing the binding of click events to all elements. To address this, consider implementing the following solution:

Suggested HTML structure:

var changeColor = $('.changeColor');
colors      = ['green', 'red', 'white'];
let   colorIndex  = 0;

changeColor.click((event) => {
$(event.toElement).css('background-color',colors[colorIndex])     
colorIndex = (colorIndex + 1) % colors.length
});

html {
    -webkit-font-smoothing: antialiased;
}

body {
    background: #fff;
    margin: 0 auto;
    padding: 1em;
}

/* CSS styles go here */

<!DOCTYPE html>
<html>  
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>S test</title>
        <meta name="description" content="S test">
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
    </head>
    <body>
    <div class="generalWrapper">  
      <div class="boxes-container">  
        <div class="grid-container">
          <div class="Title">SHE</div>
          <!-- Additional HTML goes here -->
        </div>
      </div> 
    </div>
    </body>
<script type="text/javascript" src="a.js"></script>
</html>

Answer 6

Encountering a JavaScript issue is not uncommon, and the use of document.getElementById often results in only one record being returned, preventing the binding of click events to all elements. To address this, consider implementing the following solution:

Suggested HTML structure:

var changeColor = $('.changeColor');
colors      = ['green', 'red', 'white'];
let   colorIndex  = 0;

changeColor.click((event) => {
$(event.toElement).css('background-color',colors[colorIndex])     
colorIndex = (colorIndex + 1) % colors.length
});

html {
    -webkit-font-smoothing: antialiased;
}

body {
    background: #fff;
    margin: 0 auto;
    padding: 1em;
}

/* CSS styles go here */

<!DOCTYPE html>
<html>  
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>S test</title>
        <meta name="description" content="S test">
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
    </head>
    <body>
    <div class="generalWrapper">  
      <div class="boxes-container">  
        <div class="grid-container">
          <div class="Title">SHE</div>
          <!-- Additional HTML goes here -->
        </div>
      </div> 
    </div>
    </body>
<script type="text/javascript" src="a.js"></script>
</html>

Switch background color multiple times on click using JavaScript loop

Answer №1

Answer №2

Answer №3

Similar questions

Tips for combining two htmlelements together

Warning: Knex was unable to acquire a connection due to a timeout, resulting in an UnhandledPromiseRejectionWarning

What could be the reason that my Javascript function is not displaying in the HTML document?

Using Three.js to create smooth rotations for objects

What is preventing Firefox and IE from displaying images fully in a list item?

Slightly puzzled by the declaration of `var app = express()`

Whenever I adjust the layout of the navigation bar, the edges end up getting clipped

What advantages can be gained from having multiple package.json files within a single application?

How can we extract word array in Python that works like CryptoJS.enc.Hex.parse(hash)?

Another element concealing an element underneath

The CSS Scroll-Snapping feature seems to be overlooking one specific element that it should be snapping to

Looking for repeating values in inputs excluding this one

Is it necessary to encapsulate Factory calls within a function in my Controller file?

Tips for utilizing Jquery webcam on mobile devices like Android and iPhone

Oops! Looks like there's an issue with the NextJS Custom Carousel bug. The error message reads: ReferenceError: document is not defined and is unable to read properties of undefined (

Alignment problem with email signatures on MAC devices

The starting point of an html text is signified by < and it concludes with >, showcasing

Utilizing the essential "required" attribute in HTML5 in conjunction with a submit Button

Steps for determining the total count of elements in a SQLite table using PhoneGap

Is there a way to check the existence of an email in the database without having to refresh the PHP page?