How to change the colour of a div element when clicked?

Question

I have a this html page, Whenever the element with class name FreeSeat is clicked I want to change the colour of that div element.Below is my html page

<html>
 <head>
  <title>
   QuickBus
  </title>
  <link type="text/css" rel="stylesheet" href="Seat.css">
 </head>
 <body>
  <div id="Bus">
   <div class="Row">
    <div class="FreeSeat"  ></div>
    <div class="FreeSeat"  ></div>
    <div class="ResSeat"  ></div>
    <div class="ResSeat"  ></div>
    <div class="ResSeat"  ></div>
   </div>
  </div>
 <body>
</html>

It will be very helpful if anyone can help me out with this .

Possible duplicate of [Change CSS properties on click](http://stackoverflow.com/questions/14319274/change-css-properties-on-click) and a host of others found by searching SO. — Rob, Oct 16 '15 at 03:05

score 3 · Answer 1 · edited May 23 '17 at 12:08

Considering that you want to use pure JS and not any library, you'd have to manually add event listeners to your classes. And it has been solved for a similar problem here

var freeclass = document.getElementsByClassName("FreeSeat");
var myFunction_Free = function() {
    this.style.color = "blue";
}
for(var i=0;i<freeclass.length;i++){
    freeclass[i].addEventListener('click', myFunction_Free, false);
}

But for your case, here's a working fiddle

score 2 · Answer 2 · answered Oct 16 '15 at 02:59

2

JQuery is amazing for these sorts of things.

Say you have a div with id 'box1'

<div id='box1'></div>

Style it with css

#box1 {
    width:100px;
    height:100px;
    background-color:white;
    border:1px solid black;
}

Using JQuery, you can make this call:

$( "#box1" ).click(function() {
  $('#box1').css('background-color', 'red');
});

And now whenever your div is clicked, the colour will change, you can customise this however much you like.

Here is a JSFiddle demo.

Also, since you didn't specify exactly what you want to change the colour of, in my example jquery, it is telling the browser that when a div with an id of box1is clicked, change the background-color of the div with an id of box1, you can change anything though.

If you have a <p> tag you can change that too when the div is clicked, hope this helped!

answered Oct 16 '15 at 02:59

Sam Chahine

530
1
17
52

You don't need jQuery to do this and it's just as easy in plain javascript. – Rob Oct 16 '15 at 03:07
It might very well be, but this is just an example using jQuery, but I do prefer it over JS. Could you please show me an example using plain JS? @Rob – Sam Chahine Oct 16 '15 at 03:10
If you want that, you have to start your own question. Also, jQuery IS javascript. Better yet, just search SO or Google for an example. – Rob Oct 16 '15 at 03:11
OP didn't specifically for pure javascript, so I assumed this might help him, I'll take a look later! :) – Sam Chahine Oct 16 '15 at 03:15
My point is, it's not necessary to load an entire library just to do something as simple as changing the color of an element. – Rob Oct 16 '15 at 03:17
You're right, but in doing so, it makes other things much simpler to do. – Sam Chahine Oct 16 '15 at 03:18
You presume he wants to do "other things" and those other things are more difficult in plain javascript. I've never found that to be the case. – Rob Oct 16 '15 at 03:19
And you presume he doesn't, I am sure there is more to his project than changing the colour of a div, either way, this is just an example and it is up to OP whether or not he wants to use it. – Sam Chahine Oct 16 '15 at 03:20

Grant Miller · Answer 3 · 2018-11-03T14:59:29.297

You can use the following method to change the background color of an element by class:

const free_seat = document.getElementsByClassName('FreeSeat');
free_seat[0].style.backgroundColor = '#ff0';

Each element can be referenced by its index:

free_seat[0] // first div
free_seat[1] // second div

Therefore, we can create a function that will be called whenever the click event is delivered to the target:

const change_color = () => {
  this.style.backgroundColor = '#ff0';
};

for (let i = 0; i < free_seat.length; i++) {
  free_seat[i].addEventListener('click', change_color);
}

Note: You can also use document.querySelectorAll('.FreeSeat') to obtain a NodeList of elements of a certain class.

score 1 · Answer 4 · answered Jun 27 '18 at 13:44

1

You can use simply the css focus pseudo-class for this:

#foo:focus {
    background-color:red;
}

<div id="foo" tabindex="1">hello world!</div>

Dont forget to set the tabindex.

answered Jun 27 '18 at 13:44

Gergő Kajtár

454
4
12

How to change the colour of a div element when clicked?

4 Answers4