Changing the color of a div element dynamically with JavaScript

Question

Changing the color of a div element dynamically with JavaScript

Is there a way to improve the code below so that the background color of this div box changes instantly when clicked, without needing to click twice?

function updateBackgroundColor(platz_id)
{
    if(document.getElementById(platz_id).style.backgroundColor == "rgb(0, 168, 0)")
    {
        document.getElementById(platz_id).style.backgroundColor = "blue";
        return;
    }
    document.getElementById(platz_id).style.backgroundColor = "rgb(0, 168, 0)";
}

<div class='div_platz' onclick='updateBackgroundColor(this.id)' id='".$row['platz_id']."'>".$counter."</div>

javascript html css

Answer 1

Answer №1

To easily change the color using CSS, you can toggle a class with a blue background-color by using .classList.togle('class-name')

function choose_seat(seat_id) {
  document.getElementById(seat_id).classList.toggle('bg-blue');
}

div {
  background-color: rgb(0, 168, 0);
}

.bg-blue {
  background-color: blue;
}

<div class='seat_div' onclick='choose_seat(this.id)' id='".$row[' seat_id ']."'>".$counter."</div>

Answer 2

To easily change the color using CSS, you can toggle a class with a blue background-color by using .classList.togle('class-name')

function choose_seat(seat_id) {
  document.getElementById(seat_id).classList.toggle('bg-blue');
}

div {
  background-color: rgb(0, 168, 0);
}

.bg-blue {
  background-color: blue;
}

<div class='seat_div' onclick='choose_seat(this.id)' id='".$row[' seat_id ']."'>".$counter."</div>

Answer 3

Answer №2

element.style specifically points to inline styling (defined using the HTML attribute

style="background-color: blue;"

). At the beginning, your element does not contain such an attribute.

Instead of inline styles, consider utilizing a selected CSS class and toggling it upon click:

.div_platz { background-color: rgb(0, 168, 0); }
.div_platz.selected { background-color: blue; }

<div class='div_platz' onclick='this.classList.toggle("selected")' id='".$row['platz_id']."'>".$counter."</div>

For better practice, avoid using inline event listeners. Instead, add the listener with JavaScript:

document.addEventListener('DOMContentLoaded', () => {
  let places = document.querySelectorAll('div.div_platz');
  for (const place of places) {
    place.addEventListener('click', function() {
      place.classList.toggle('selected');
    })
  }
});

.div_platz { background-color: rgb(0, 168, 0); }
.div_platz.selected { background-color: blue; }

<div class='div_platz' id='".$row['platz_id']."'>".$counter."</div>

Answer 4

element.style specifically points to inline styling (defined using the HTML attribute

style="background-color: blue;"

). At the beginning, your element does not contain such an attribute.

Instead of inline styles, consider utilizing a selected CSS class and toggling it upon click:

.div_platz { background-color: rgb(0, 168, 0); }
.div_platz.selected { background-color: blue; }

<div class='div_platz' onclick='this.classList.toggle("selected")' id='".$row['platz_id']."'>".$counter."</div>

For better practice, avoid using inline event listeners. Instead, add the listener with JavaScript:

document.addEventListener('DOMContentLoaded', () => {
  let places = document.querySelectorAll('div.div_platz');
  for (const place of places) {
    place.addEventListener('click', function() {
      place.classList.toggle('selected');
    })
  }
});

.div_platz { background-color: rgb(0, 168, 0); }
.div_platz.selected { background-color: blue; }

<div class='div_platz' id='".$row['platz_id']."'>".$counter."</div>

Changing the color of a div element dynamically with JavaScript

Answer №1

Answer №2

Similar questions

Creating a wider background color for active nav bar links in CSS - A step-by-step guide

To enable communication between methods, you can easily add a property to a JavaScript class component

What is the best way to accomplish this task with promises (using the Q library)?

How can I convert an Array into a Dictionary using JavaScript?

Transformation of a JsonString into an array with the help of Angular.js

Tips for integrating CSS keyframes in MUI v5 (using emotion)

Symfony allows for the addition of an embedded collection prototype with an empty string

Execute a Bash script using Node.js based on a request from the client

AngularJS single page applications experiencing issues with loading scripts and stylesheets upon page reload

Extracting JSON data within ajax's success callback

Cannot use Object.keys function in AngularJS

What steps should I take to repair this array table?

Obtaining the ID from a JSON object in react.js ES6: A Comprehensive Guide

Tips for transferring information between routes in Node.js using Express.js

Want to learn how to create an image magnifier using just one image?

Is there a way to set a personalized callback function when closing a modal with MicroModal?

The placeholder within my input moves up and down when switching the input type from password to text

Retrieve the parent object within a constructor function

A complete guide on utilizing *ngFor in Angular to display data rows

PHP is adding unique characters like Â into the database records