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

What is the best way to extract user input and pass it to an AJAX request URL?

Tips for implementing code to function across several images in HTML and CSS

Is there a way to determine if a table cell contains overflowing text compared to another cell?

What causes the discrepancy in CSS display between production and development environments in Material-UI?

Limiting a text based on spaces or at the completion of a word within a string or sentence

Angular connecting to the count of filtered items

Using jQuery in Angular, you can add a div element to hidden elements by appending

Transform nested properties of an object into a new data type

How can we use jQuery to change the format of a

uncertainty when implementing ng-if / ng-show / ng-hide

Strange appearance of Material UI input field

A comprehensive guide to effectively formatting Recharts in React: addressing alignment and size management!

The onclick event seems to be malfunctioning on the website

Tips for integrating html2canvas with Vue JS?

Tips for ensuring the border matches the size of the image

What is the most effective method for populating data within a browser window?

ToggleClass is not being applied to every single div

Switch between different react components

The app.get() method in Node JS and Express requires three parameters, and I am seeking clarification on how these parameters work

Accessing web authentication through VBA