CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Antariksh Bora
Antariksh Bora

Reputation: 13

Onclick function with CSS

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.

Upvotes: 1

Views: 911

Answers (3)

Valli69
Valli69

Reputation: 9902

function changeImage(this){
   var el;
   el.classname = 'updatedImgClass';
}

Trigger the above function when we click on a particular seat by passing it's object

Upvotes: 0

Benissimo
Benissimo

Reputation: 1012

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.

Upvotes: 1

ShinTakezou
ShinTakezou

Reputation: 9681

I suggest you the use of jQuery which allows easily this kind of thing. In your case you would have

 $("#w1").addClass("myClass");

Upvotes: 0

Related Questions