Is there a way to dynamically alter the background style of a div by clicking on it multiple times using Javascript?

Question

Is there a way to dynamically alter the background style of a div by clicking on it multiple times using Javascript?

I am attempting to create a calendar where each day changes its background color between blue and green when clicked, using JavaScript and CSS. It should function similar to a toggle feature. The default color is blue, and I have successfully made the days turn green when clicked. However, I am struggling to figure out how to change them back to blue.

Here is my current approach:

const days = document.getElementsByClassName('day')

for (let i = 0; i < days.length; i++) {
  days[i].addEventListener('click', function(e) {
    if (e.target.style.background != 'linear-gradient(#7ce8b6, #00ff2a)') {
      e.target.style.background = 'linear-gradient(#7ce8b6, #00ff2a)'
    } else if (e.target.background != 'linear-gradient(#7CB9E8, #00FFFF)') {
      e.target.background = 'linear-gradient(#7CB9E8, #00FFFF)'
    }
  });
}

.day {
  height: 10em;
  width: 100px;
  padding: 1em;
  border: 5px solid rgb(29, 29, 116);
  border-radius: 1em;
  background: linear-gradient(#7CB9E8, #00FFFF);
}

<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>

javascript css

Answer 1

Answer №1

Implement a CSS class that defines a green background color, and then use JavaScript to toggle this class on each div element.

const days = document.getElementsByClassName('day');

for (let i = 0; i < days.length; i++) {
  days[i].addEventListener('click', function(e) {
    days[i].classList.toggle("green");
  });
}

.day {
  height: 30px;
  width: 30px;
  padding: 1em;
  border: 5px solid rgb(29, 29, 116);
  border-radius: 1em;
  background: linear-gradient(#7CB9E8, #00FFFF);
}

.green {
  background: linear-gradient(#7ce8b6, #00ff2a);
}

<div class="day">1</div>
<div class="day">2</div>

Answer 2

Implement a CSS class that defines a green background color, and then use JavaScript to toggle this class on each div element.

const days = document.getElementsByClassName('day');

for (let i = 0; i < days.length; i++) {
  days[i].addEventListener('click', function(e) {
    days[i].classList.toggle("green");
  });
}

.day {
  height: 30px;
  width: 30px;
  padding: 1em;
  border: 5px solid rgb(29, 29, 116);
  border-radius: 1em;
  background: linear-gradient(#7CB9E8, #00FFFF);
}

.green {
  background: linear-gradient(#7ce8b6, #00ff2a);
}

<div class="day">1</div>
<div class="day">2</div>

Answer 3

Answer №2

} else if (e.target.style.background != 'linear-gradient(#7CB9E8, #00FFFF)') {
  e.target.style.background = 'linear-gradient(#7CB9E8, #00FFFF)'
}

It may need to be updated to:

} else if (e.target.style.background != 'linear-gradient(#7CB9E8, #00FFFF)') {
  e.target.style.background = 'linear-gradient(#7CB9E8, #00FFFF)'
}

This will ensure that it aligns with the first if statement. I have not yet tested this code, but upon a logical reading, I noticed a potential typo.

EDIT:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.day {
  height: 10em;
  width: 100px;
  padding: 1em;
  border: 5px solid rgb(29, 29, 116);
  border-radius: 1em;
  background: linear-gradient(#7CB9E8, #00FFFF);
}
</style>

<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>

<script>
const days = document.getElementsByClassName('day')

for (let i = 0; i < days.length; i++) {
  days[i].addEventListener('click', function(e) {
  alert(e.target.style.background);
    if (e.target.style.background != 'linear-gradient(rgb(124, 232, 182), rgb(0, 255, 42))') {
      e.target.style.background = 'linear-gradient(#7CE8B6, #00FF2A)';
    } else {
      e.target.style.background = 'linear-gradient(#7CB9E8, #00FFFF)';
    }
  });
}
</script>

</body>
</html>

During my testing, my browser detected the colors as RGB values. By converting the hexadecimal values into their respective RGB ranges, the issue was resolved.

Answer 4

} else if (e.target.style.background != 'linear-gradient(#7CB9E8, #00FFFF)') {
  e.target.style.background = 'linear-gradient(#7CB9E8, #00FFFF)'
}

It may need to be updated to:

} else if (e.target.style.background != 'linear-gradient(#7CB9E8, #00FFFF)') {
  e.target.style.background = 'linear-gradient(#7CB9E8, #00FFFF)'
}

This will ensure that it aligns with the first if statement. I have not yet tested this code, but upon a logical reading, I noticed a potential typo.

EDIT:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.day {
  height: 10em;
  width: 100px;
  padding: 1em;
  border: 5px solid rgb(29, 29, 116);
  border-radius: 1em;
  background: linear-gradient(#7CB9E8, #00FFFF);
}
</style>

<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>

<script>
const days = document.getElementsByClassName('day')

for (let i = 0; i < days.length; i++) {
  days[i].addEventListener('click', function(e) {
  alert(e.target.style.background);
    if (e.target.style.background != 'linear-gradient(rgb(124, 232, 182), rgb(0, 255, 42))') {
      e.target.style.background = 'linear-gradient(#7CE8B6, #00FF2A)';
    } else {
      e.target.style.background = 'linear-gradient(#7CB9E8, #00FFFF)';
    }
  });
}
</script>

</body>
</html>

During my testing, my browser detected the colors as RGB values. By converting the hexadecimal values into their respective RGB ranges, the issue was resolved.

Answer 5

Answer №3

When you select a div element, the browser displays its color in RGB format like this:

To update your code accordingly:

 const days = document.getElementsByClassName('day')

 for (let i = 0; i < days.length; i++) {
  days[i].addEventListener('click', function(e) {
  if (e.target.style.background != 'linear-gradient(rgb(124, 232, 182), rgb(0, 255, 42))') {
    e.target.style.background = 'linear-gradient(#7CE8B6, #00FF2A)';
   } else {
  e.target.style.background = 'linear-gradient(#7CB9E8, #00FFFF)';
   }
  });

Answer 6

When you select a div element, the browser displays its color in RGB format like this:

To update your code accordingly:

 const days = document.getElementsByClassName('day')

 for (let i = 0; i < days.length; i++) {
  days[i].addEventListener('click', function(e) {
  if (e.target.style.background != 'linear-gradient(rgb(124, 232, 182), rgb(0, 255, 42))') {
    e.target.style.background = 'linear-gradient(#7CE8B6, #00FF2A)';
   } else {
  e.target.style.background = 'linear-gradient(#7CB9E8, #00FFFF)';
   }
  });

Answer 7

Answer №4

There are a few issues with your CSS code that need to be addressed:

The value of the background property should be checked through backgroundImage in JavaScript when using a linear-gradient.
To check for the active background image property set via a class, you should utilize getComputedStyle().

In the else if statement, you are missing the style setting part. It should be

e.background = 'linear-gradient(#7CB9E8, #00FFFF)

instead of

e.target.background = 'linear-gradient(#7CB9E8, #00FFFF)

.

Keep in mind that browsers may render colors in formats other than hex like RGBA in Firefox.

Below is the corrected snippet that addresses the mentioned issues and functions as expected:

const days = document.getElementsByClassName('day')
console.clear();
for (let i = 0; i < days.length; i++) {
  days[i].addEventListener('click', function(e) {
    const style = getComputedStyle(e.target).backgroundImage;
    console.log(style);
    if (style != 'linear-gradient(rgb(124, 232, 182), rgb(0, 255, 42))') {
      console.log('green');
      e.target.style.backgroundImage = 'linear-gradient(rgb(124, 232, 182), rgb(0, 255, 42))'
    } else if (style != 'linear-gradient(rgb(124, 185, 232), rgb(0, 255, 255))') {
      console.log('blue');
      e.target.style.backgroundImage = 'linear-gradient(rgb(124, 185, 232), rgb(0, 255, 255))'
    }
  });
}

.day {
  height: 10em;
  width: 100px;
  padding: 1em;
  border: 5px solid rgb(29, 29, 116);
  border-radius: 1em;
  background: linear-gradient(rgb(124, 185, 232), rgb(0, 255, 255));
}

<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>

Answer 8

There are a few issues with your CSS code that need to be addressed:

The value of the background property should be checked through backgroundImage in JavaScript when using a linear-gradient.
To check for the active background image property set via a class, you should utilize getComputedStyle().

In the else if statement, you are missing the style setting part. It should be

e.background = 'linear-gradient(#7CB9E8, #00FFFF)

instead of

e.target.background = 'linear-gradient(#7CB9E8, #00FFFF)

.

Keep in mind that browsers may render colors in formats other than hex like RGBA in Firefox.

Below is the corrected snippet that addresses the mentioned issues and functions as expected:

const days = document.getElementsByClassName('day')
console.clear();
for (let i = 0; i < days.length; i++) {
  days[i].addEventListener('click', function(e) {
    const style = getComputedStyle(e.target).backgroundImage;
    console.log(style);
    if (style != 'linear-gradient(rgb(124, 232, 182), rgb(0, 255, 42))') {
      console.log('green');
      e.target.style.backgroundImage = 'linear-gradient(rgb(124, 232, 182), rgb(0, 255, 42))'
    } else if (style != 'linear-gradient(rgb(124, 185, 232), rgb(0, 255, 255))') {
      console.log('blue');
      e.target.style.backgroundImage = 'linear-gradient(rgb(124, 185, 232), rgb(0, 255, 255))'
    }
  });
}

.day {
  height: 10em;
  width: 100px;
  padding: 1em;
  border: 5px solid rgb(29, 29, 116);
  border-radius: 1em;
  background: linear-gradient(rgb(124, 185, 232), rgb(0, 255, 255));
}

<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>

Answer 9

Answer №5

Utilize event delegation along with CSS.

document.querySelector('.days').addEventListener('click', ev => {
  if (ev.target.matches('.day')) {
    ev.target.classList.toggle('other')
  }
})

.day {
  height: 4rem;
  border: 1px solid blue;
  margin: 0.5rem;
  border: 5px solid rgb(29, 29, 116);
  border-radius: 1em;
  background: linear-gradient(#7CB9E8, #00FFFF);
}

.day.other {
  background: linear-gradient(#7ce8b6, #00ff2a);
}

<div class="days">
  <div class="day">1</div>
  <div class="day">2</div>
  <div class="day">3</div>
  <div class="day">4</div>
  <div class="day">5</div>
  <div class="day">6</div>
  <div class="day">7</div>
</div>

Answer 10

Utilize event delegation along with CSS.

document.querySelector('.days').addEventListener('click', ev => {
  if (ev.target.matches('.day')) {
    ev.target.classList.toggle('other')
  }
})

.day {
  height: 4rem;
  border: 1px solid blue;
  margin: 0.5rem;
  border: 5px solid rgb(29, 29, 116);
  border-radius: 1em;
  background: linear-gradient(#7CB9E8, #00FFFF);
}

.day.other {
  background: linear-gradient(#7ce8b6, #00ff2a);
}

<div class="days">
  <div class="day">1</div>
  <div class="day">2</div>
  <div class="day">3</div>
  <div class="day">4</div>
  <div class="day">5</div>
  <div class="day">6</div>
  <div class="day">7</div>
</div>

Is there a way to dynamically alter the background style of a div by clicking on it multiple times using Javascript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Problem with React Native Camera: Camera display is not functioning correctly - React-Native-Vision-Camera Error

Is Amazon altering the names of their CSS selectors and HTML elements on the fly?

Extract the element when the mouse is clicked

A thrilling twist on the classic game of Tic Tac Toe, where X and

retrieving identifiers from a separate table for an array of values

Refine your search with a JSON object description in expressJS and UnderscoreJS

Guide to leveraging clsx within nested components in React

Smoothly transition the box shadow using CSS3's ease-in and ease-out effect

Custom Native Scrollbar

How do I incorporate a standalone checkbox in a React Material-UI table without affecting row selection upon clicking?

Increment the text counter following the uploading of an image file with html format

Exploring the function of variables in VueJS

Best practices for coding in HTML and CSS

I have encountered a node.js error related to the 'Require Stack'

Using jQuery, set a restriction on the total number of options in three dropdown menus to

I am currently working with a for loop within an object in JavaScript, but there seems to be a problem with one

How can I display SQL results in a Jade page using Node, Express, and MySQL?

Display additional javascript code for expanding a marquee

Having trouble with Vue component not showing updated data after axios POST request issue

What is the most effective method for dimming or disabling a Material-UI div?