Onclick function with CSS

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.

Try jQuery. With it you would write $('#w1').click(function() { this.addClass('myClass'); }); — fragmentedreality
– fragmentedreality, Commented Apr 10, 2012 at 6:18
would be better if you post a sample of your HTML markup... without knowledge of what the element w1 is (span/div/some other html element) it would be a bit difficult to answer..also are you sure that the click event is firing properly in the first place? — optimusprime619
– optimusprime619, Commented Apr 10, 2012 at 6:18

Benissimo · Accepted Answer · 2012-04-10 06:27:26Z

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.

I tried your suggestion and used <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" > $(document).ready(function() { $("#w1").click(function() { $(this).addClass('myClass'); }); $("#seats a").click(function() { $(this).addClass('myClass'); }) $("#seats a").click(function() { $(this).toggleClass('myClass'); }); }); </script> but could not get the result as I don't have jQuery knowledge.
Try this: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" > $(document).ready(function() { $("#seats a").click(function() { $(this).toggleClass('myClass'); }); }); </script> 1) You only need to load jquery once (looked like you were loading 2 copies of it). 2) You only need to add one click function (otherwise they risk cancelling each other out, specifically the last two). 3) Post a full example of the entire markup for more feedback.

ShinTakezou · Accepted Answer · 2012-04-10 06:27:04Z

0

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

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

answered Apr 10, 2012 at 6:27

ShinTakezou

9,7311 gold badge34 silver badges41 bronze badges

Comments

Valli69 · Accepted Answer · 2012-04-10 12:24:55Z

0

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

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

answered Apr 10, 2012 at 12:24

Valli69

10k6 gold badges27 silver badges29 bronze badges

Collectives™ on Stack Overflow

Onclick function with CSS

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related