Question

I am trying to design a bus seat arrangement with CSS and I completed the hover section with CSS but next part is to select the seat on which after click there should be change in the background image.
I am using different IDs for each seat. Using the following code

.myClass {
    background:url('images/transparent-backgro-seatlayout.gif') 0 -60px;
}

document.getElementById("w1").className += " myClass";

but this is not working. As I don’t know much about the java script, I am unable to solve my problem. Kindly help.

Answer 1

If you use jQuery, this could be as easy as:

$("#w1").click(function() {
  $(this).addClass('myClass');
});

Note that, by using $(this) you automatically refer to the element that was clicked. This is handy as you mention there are many clickable seats, each with a unique id. Instead of manually creating an event handler for each clickable seat (“w1”, “w2”, etc.) it’s simpler to use a selector which matches any of the seats. Assume all the seats are inside a tag with id “seats” and that each seat is represented with an “a” tag:

$("#seats a").click(function() {
  $(this).addClass('myClass');
});

So your markup would be something like this:

<div id="seats">
  <a id="w1">seat 1</a>
  <a id="w2">seat 2</a>
  ....
</div>

Furthermore, if you wanted the user to be able to click the seat again to unselect it, use toggleClass instead of addClass:

$("#seats a").click(function() {
  $(this).toggleClass('myClass');
});

Note that you don’t have to use jquery to implement all of this. You could do it in raw javascript or you could use a different javascript framework. But if you have the choice, jquery makes coding this up a lot easier.