Solved

Toggle image & calculate total working, rollover doesnt function?

Posted on 2011-02-26
37
252 Views
Last Modified: 2012-08-13
Hello everyone, Im both new to the forum (& to Javascript).   Ive gone back to uni as a mature student & have an assessment to hand in on Monday & Im scunnered after six days of googling.  Im using an external js file & html.

I have images of seats which when clicked on, should toggle from the available image to reserved image, in addition to the image changing on rollover (same images).  I also want to have a "running total" of the cost of seats clicked on.  I can get either the toggle & calculator bit working, or the rollover - but not both.  The closet I got meant that the running total appeared with a minus when the user toggled the image again & although the rollover worked the toggle sticky didnt.

Please could someone help me?  Ive added my code below;
 
//js 
//calculate running total of seat prices  // working
var total = 0;
function calculate(seat,price){
if (seat.src.indexOf('seat_0.png')>=1){
	seat.src ='seat_1.png';
		total += price;
		}
		else {
		seat.src ='seat_0.png';
		total-= price;
		}
		total=Math.round(total*100)/100;
	document.getElementById('totalprice').innerHTML = total;	
}

//mouseover and out // not working
function seatOn(){
document.getElementById("seat")
seat = 'seat_1.png';
}
function seatOff(){
document.getElementById("seat")
seat = 'seat_0.png';
}

//html
<table id="tableOne" border="0" width="55%" align="center">
<tr>
<td colspan="10"><p span class="row"><span class="row">Row A</span><span class="priceOne"> £10.00</span></td>
		<td><a href="#"><img src="seat_0.png" onclick="calculate(seat,10)" onmouseover="over(seat)" onmouseout="out(seat)" id="seat"></a>
		<td><a href='#'><img src="seat_0.png" onclick='calculate(this,10)'></a></td>
		<td><a href='#'><img src="seat_0.png" onclick='calculate(this,10)'></a></td></tr>

<tr><td><h5>Total price: £<span id="totalprice" align="right"></span></td></tr></table>

Open in new window

0
Comment
Question by:scotia2k11
  • 19
  • 18
37 Comments
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
This doesn't seem complete.

Where are your functions "over" and "out" defined?  You use them in the onmouse... events but I don't see their definitions.

I see seatOn and seatOff but not over and out.

0
 

Author Comment

by:scotia2k11
Comment Utility
Im sorry, Ive become so confused with varous tutorials of the past few days using different descriptions.  I think I see what you are pointing at though, - is it that Ive set up the function names but not told the function what to do when the user rolls over the image?

Many thanks,
0
 

Author Comment

by:scotia2k11
Comment Utility
...& Ive muddled up the names in my mouseover bit...
0
 

Author Comment

by:scotia2k11
Comment Utility
...sorry - I sent you a previous attempt of the mouseover - this is what I have now,


<a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn("seat")' onmouseout='seatOff("seat")'></a>

Open in new window

0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
On line 31 you are missing the matching </td> tag.



0
 

Author Comment

by:scotia2k11
Comment Utility
...thank you for noticing that - but adding it doesnt change my failure to solve my problem? (apart from that Im very new to this & not understanding where Im going wrong.

Do you know if there is a reason why these several functions are not working?  Are you able to point me to a better tutorial, or offer some advice on my code since Im unlikely to understand your questions, a correct example of my rollover code would be of great benefit.

Many thanks.
0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
It does seem to work for me, I think.  You didn't give me enough to really test it, so to make a web page out of it I put some > tags in and added alert statements since I don't have your images.

It does  trigger the mouseover events for the first seat.  The other seats you haven't enabled yet - I assume you are just testing this code out on the first seat.

<script>
//js 
//calculate running total of seat prices  // working
var total = 0;
function calculate(seat,price){
if (seat.src.indexOf('seat_0.png')>=1){
	seat.src ='seat_1.png';
		total += price;
		}
		else {
		seat.src ='seat_0.png';
		total-= price;
		}
		total=Math.round(total*100)/100;
	document.getElementById('totalprice').innerHTML = total;	
}

//mouseover and out // not working
function seatOn(){
alert('seatOn');
document.getElementById("seat")
seat = 'seat_1.png';
}
function seatOff(){
alert('seatOff');
document.getElementById("seat")
seat = 'seat_0.png';
}
</script>

<table id="tableOne" border="0" width="55%" align="center">
<tr>
<td colspan="10"><p span class="row"><span class="row">Row A</span><span class="priceOne"> £10.00</span></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn("seat")' onmouseout='seatOff("seat")'></a></td>
		<td><a href='#'><img src="seat_0.png" onclick='calculate(this,10)'></a></td>
		<td><a href='#'><img src="seat_0.png" onclick='calculate(this,10)'></a></td></tr>

<tr><td><h5>Total price: £<span id="totalprice" align="right"></span></td></tr></table>

Open in new window

0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
I think that lines 22 and 27 should be "seat.src = " not just "seat = "

That should help a little.
0
 

Author Comment

by:scotia2k11
Comment Utility
Thank you very much for your patience - I really appreciate this.  I really Im not explaining myself very well. Ive uploaded the pages, corrected my td error, & the mouseover names but the mouseover effect still isnt working.  Im testing it on wamp since the uni told us we had to do it this way.  This wont ever be a functional ticket buying thing, Im just trying to pass my module - I dont think being dyslexic helps!

seat reservations

Many thanks,

0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
You were actually really close.  Try these changes.

I had to change your "seat" arguments to "this", which you were already doing correctly in the calculation function.  This was the biggest problem.

Also had to fix lines 22 and 27 as described in previous note, which was also keeping it from working.

//calculate running total of seat prices  // working
var total = 0;
function calculate(seat,price){
if (seat.src.indexOf('seat_0.png')>=1){
	seat.src ='seat_1.png';
		total += price;
		}
		else {
		seat.src ='seat_0.png';
		total-= price;
		}
		total=Math.round(total*100)/100;
	document.getElementById('totalprice').innerHTML = total;	
}

//mouseover and out // not working
function seatOn(seat){
seat.src = 'seat_1.png';
}
function seatOff(seat){
seat.src = 'seat_0.png';
}

//reset seats
function cancelSeats(seat,price){
var seat = document.getElementsByTagName('img');
document.getElementById('totalprice').innerHTML = 0;
   for (var i=0;i<seat.length;i++){
    if(seat[i].getAttribute('src')=='seat_1.png'){
     seat[i].setAttribute('src','seat_0.png');  
     seat[i].setAttribute('onclick',''); 
    }
   }
  }

  //reset all button
function resetPage(){
   window.location="home.html";
  }

Open in new window




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Welcome to Hub Tickets Reservations </title>
<script src="selectRow.js"></script>
<link rel="stylesheet" type="text/css" href="hub.css"> 
</head>
<!-- header area -->
 <div id="myTickets" style="center">
  <h1>Ladies & Gentlemen...</h1>
  <div id="myTicket"><center><h4>Your Tickets Await You!</h4>
		<h5>Please on your preferred seats below to reserve ~ thank you! </h5>
		<!-- end of header area -->

<body topmargin="100" leftmargin="0">
 
<!-- seating plan -->
  <table id="tableOne" border="0" width="55%" align="center">
  <tr><img src="screen.png" style="border:none"><div class="screen">Screen</div></tr>
	<tr>
		<td colspan="10"><p span class="row"><span class="row">Row A</span><span class="priceOne"> £10.00</span></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
				<td colspan="1"></td>	
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td></tr>
			<td></td>	
	<tr>
		<td colspan="10"><p span class="row">Row B</span><span class="priceOne"> £10.00</span></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
				<td colspan="1"></td>	
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td></tr>
				<td></td>	
	<tr>
		<td colspan="10"><p span class="row">Row C</span><span class="priceOne"> £10.00</span></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
				<td colspan="1"></td>	
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td></tr>
				<td></td>	
	<tr>
	<td colspan="7"><p span class="row">Row D</span><span class="priceTwo"> £5.00</span></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
			<td colspan="2"></td>	
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td></tr>
	
	<tr>
	<td colspan="7"><p span class="row">Row E</span><span class="priceTwo"> £5.00</span></td>
	<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
			<td colspan="2"></td>	
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td></tr>
</table>

<P><table width="55%" align="center">
	
	<tr>
	<td width="30%" align="left" valign="top">
		<div class="legend"><img src="images/available.png" alt="Available" />Available Seat</div> 
		<div class="legend"><img src="images/mine.png" alt="Mine" />My Reservations</div> 
		<div class="legend"><img src="images/taken.png" alt="Taken" />Unavailable Seat</div></td>
		</td>
		
	<td width="45%" align="left" valign="top">
	<div id="theButtons">
	 <input type="button" value="Confirm" id="confirm" onclick="confirmSeats()"/>&nbsp;
	 <input type="button" value='Cancel' id='cancel' onClick="cancelSeats()";>&nbsp;
	 <input type="button" value="Reset" id="reset" onclick="resetPage()" />&nbsp;
	 <input type="button" value="Purchase" id="checkout" onclick="purchaseSeats()" disabled="disabled" /></div></td>
	 <td align="left" valign="top"><div id="myTicket"><h5>Total price: £<span id="totalprice" align="right"></span></div>
  
</td></tr></table>

</body>
</html>

Open in new window

0
 

Author Comment

by:scotia2k11
Comment Utility
...I had tried that but it causes an error in the calculations when the user clickt the seat?  *sigh* - the price displays as a minus & then doesnt add up correctly.  I figured there must be something wrong with using two "this" statements & discounted how to fix it...Its certianly a lot closer to my end requirements though,

Many thanks :)
0
 

Author Comment

by:scotia2k11
Comment Utility
...also, it stops the toggle onclick (change the seat image) working....
0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
The trouble is with your logic of looking to see if a seat's image is "seat_0.png" to decide if it is free.

You are making it appear reserved during the mouseover (temporarily turning it red).  But only we know it is temporary.  The image "src" has been set to seat_1.png in the mouseover.

So when we see the user's click, the seat is already red and appears to be reserved, so you "unreserve" it, hence the minus sign.

Besides this problem, there is another complication we still need to address - once a seat is reserved (red) what is the mouseover supposed to do to it?  Turn it back green temporarily, or what?

I have to think about the best way to fix this, just wanted to give you an update.

Basically, using the image name to detemine the state of the seat, while it seems a good idea, isn't.
0
 

Author Comment

by:scotia2k11
Comment Utility
...yes, I can see what you are saying.  Ive had a go at adding a third image which appears when the users clicks to "confirm" - but as you said it doesnt resolve the previous issues.  Also, the totalling goes a bit haywire. When the user clicks a seat to reserve it, the mouseover functions are meant to stop for that particular seat, - hence the idea of a third seat colour (grey - Im so original!) ...

Many thanks for your time & patience tonight - I appreciate how late it is here in UK & will just keep going trial & error for a few more hours (& hopefully if you have time to think it through even tomorrow you can help even more),

Many thanks,
0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
Try this.

There is a great feature in Javascript that we can add our own variables to any object.  So by just refering to "seat.isReserved", we can add a new flag to every seat called "isReserved".  We can then use that flag to keep track of whether the seat is reserved or not.

Also I added some logic so the mouseover will not turn a seat green (on mouse-out) if the seat is reserved.  So it stays red.

//calculate running total of seat prices  // working

var total = 0;

function calculate(seat,price){
	if ( ! seat.isReserved ){
		seat.src ='seat_1.png';
		total += price;
		seat.isReserved = 1;
	} else {
		seat.src ='seat_0.png';
		total -= price;
		seat.isReserved = 0;
	}
	total=Math.round(total*100)/100;
	document.getElementById('totalprice').innerHTML = total;
}

//mouseover and out // not working
function seatOn(seat){
	seat.src = 'seat_1.png';
}
function seatOff(seat){
	if (!seat.isReserved) seat.src = 'seat_0.png';
}

//reset seats
function cancelSeats(seat,price){
	var seat = document.getElementsByTagName('img');
	document.getElementById('totalprice').innerHTML = 0;
	for (var i=0;i<seat.length;i++){
		if(seat[i].getAttribute('src')=='seat_1.png'){
			seat[i].setAttribute('src','seat_0.png');  
			seat[i].setAttribute('onclick',''); 
		}
	}
}

//reset all button
function resetPage(){
	window.location="home.html";
}

Open in new window

0
 

Author Comment

by:scotia2k11
Comment Utility
Thank you for trying but this doesnt seem to work this end, sorry - although I can see the reasoning behind it.  I think Ill try again from a few steps back - Ive obviously confused myself again - actually, I just want to cry!  :(

0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
O don't feel that way.  You're just tired.

Put the latest up on your site where I looked before and I'll look again.

It really does work!  Are you sure you are using the latest version I posted?

Are you using Firefox or Internet Explorer?
0
 

Author Comment

by:scotia2k11
Comment Utility
Thank you, yes I am - Ive had around 12hrs sleep in the last week & am frustrated & corss at myself for not understanding this - Ive only got until Monday now to solve, or I fail.

Im using IE but have both, I can check in FF - Ill go through your example of code again just now, & upload in a few minutes, thank you very much :)
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
0
 

Author Comment

by:scotia2k11
Comment Utility
...thank you for all of this. I went back through it & saw where I have made some stupid typos' (' instead of ") etc - & its almost, almost wonderfully perfect, you are very clever!  The only issue I have now is the total.  Once the user cancels the seats, although the innerHTML shows 0, when another seat is clicked it has remembered the previous total.  But, Im so much closer & cant thank you enough - I'll keep playing with it & see if I can find a way to reset the total properly.

Many many thanks, new seat test
:) - first smile Ive had in a few days!
0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
Just add this line as the first line in the cancelSeats function to clear your running total in memory:

total = 0;

Open in new window


I am glad you are smiling.
0
 

Author Comment

by:scotia2k11
Comment Utility
...I had just spotted that I should do that, I would never have thought to look if I hadnt had your help tonight, really made me think more about the logic, rather than my trial, error & cry method :)  

Ive still got some little bits to iron out, when I cancel (for example) if I roll over the same seats the rollover stays in red, but to be honet - Im so chuffed at how much you've helped my progress I think I'll just hope my tutor chooses different seats ...or buys the DVD :D

I hope it would be ok to perhaps ask you for more help tomorrow if I get stuck, & if so do I leave this thread open or does that mean you dont get your points thing added?  Id hate to cause you hassle. (well, anymore than already!)

0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
And we also need to reset the isReserved flag for each of the seats within the "seat" loop in the cancelSeats routine:

seat[i].isReserved = 0;

Open in new window


Here's my version of the cancelSeats routine.  I also changed it to just reset all the seats without worrying about which ones are reserved or not.

I akso got rid of the line inside the loop that was setting the onClick property.  I don't know what that was supposed to do and it seems to work fine without it.

//reset seats
function cancelSeats(seat,price){
	total = 0;
	var seat = document.getElementsByTagName('img');
	document.getElementById('totalprice').innerHTML = 0;
	for (var i=0;i<seat.length;i++){
		seat[i].isReserved = 0;
		seat[i].setAttribute('src','seat_0.png');  
	}
}

Open in new window

0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
You are welcome to leave the thread open.  Get some rest.
0
 

Author Comment

by:scotia2k11
Comment Utility
Thank you so much - you've no idea how much you have helped me, Ive waited a long time to go to uni & have been so upset & stressed that I would fail this assessment.  Youre a star.

Many thanks (again)
scotia :)
0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
It makes me very happy to be able to help you.  I am glad you didn't give up.
0
 

Author Comment

by:scotia2k11
Comment Utility
...Im glad you didnt either! :D
0
 

Author Comment

by:scotia2k11
Comment Utility
Hello & good morning!  Thank you again for you previous help, Ive been trying to update things & wondered if I could ask for your help again?

When the user clicks a seat, the seat turns red as required & my subtotal updates.  When the user clicks to confirm, the seat turns grey, the mouseover stops, the subtotal & total update.  

If the user then clicks to cancel a seat (thats not currently confirmed) - Id like the seat image & totals to revert to the previous confirmed values & for the mouseovers to become active again - if that makes sense?
updated seating here

Thank you again, :)
0
 

Author Comment

by:scotia2k11
Comment Utility
...I also need the disabled "checkout" button to become clickable (but not go anywhere or do anything)...Thank you!!!
0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
It is looking good.  Congratulations.  I will look at your questions this morning (New Hampshire time).

I think maybe part of the answer is to add another flag - seat.isConfirmed - and fix our logic to understand that flag, too.  So a seat can be open (no flags set), isReserved or isConfirmed.
0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
Here's what I see so far.  All easily fixed.  I'll post my changes in a little while for you to see.

The cancelSeats function has mucked up curly-brackets and "else" branch.

You declare your variables several times.  You should only use "var" with a variable once.  The "var" line is where the variable gets declared (created).  After that, just use it.

You are using the seat image name to keep track of whether it is confirmed - this is where a new isConfirmed flag should be used instead - just like we did with the isReserved flag.

In the cancelSeats and confirmSeats functions, the lines that set the total and subtotal to zero are outside the function instead of inside, so these lines won't be executed when the functions are called.
0
 

Author Comment

by:scotia2k11
Comment Utility
Wow, that is actually beginning to make sense to me!!! Thank you! Im going to try & do as you have suggested this afternoon & see how I get on - I look forward to seeing your corrections too - many many thanks!!  :)
0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
I made *many* changes.  Try it out.  Please look this over very carefully and try to match up to your version.


//calculate running totals of seat prices
var subtotal = 0;   // reserved seats
var total = 0;      // confirmed seats

//user clicked on a seat - reserve or unreserve it
function calculate(seat,price){
    if ( ! seat.isConfirmed )   // only if seat is not confirmed...
    {
        if ( ! seat.isReserved ){
            seat.src ='seat_1.png';
            subtotal += price;
            seat.isReserved = 1;
        } else {
            seat.src ='seat_0.png';
            subtotal -= price;
            seat.isReserved = 0;
        }

        subtotal = Math.round(subtotal*100)/100;    //**** why is this necessary?
        document.getElementById('subtotal').innerHTML = subtotal;
    }
}

//mouseover and out
function seatOn(seat){
    // On mouseover, seat goes to red unless already confirmed
    if ( ! seat.isConfirmed ) seat.src = 'seat_1.png';
}
function seatOff(seat){
    // On mouseout, seat goes back to green unless reserved or confirmed
    if ( ( !seat.isReserved ) && (! seat.isConfirmed ) ) seat.src = 'seat_0.png';
}

//confirm (already reserved) seats
function confirmSeats(seat){
    // add (reserved) subtotal to (confirmed) total in memory and on screen
    total += subtotal;
    document.getElementById('totalprice').innerHTML = total;

    // clear subtotal in memory and on screen
    subtotal = 0;
    document.getElementById('subtotal').innerHTML = 0;

    // for each reserved seat..
    var seat = document.getElementsByTagName('img');
    for (var i=0;i<seat.length;i++){
        if (seat[i].isReserved){
            seat[i].isReserved = 0;     // no longer reserved, but...
            seat[i].isConfirmed = 1;    // seat is confirmed
            seat[i].src = 'taken.png';  // and turn gray
        }
    }
}

//cancel (reserved) seats 
function cancelSeats(seat){
    // clear subtotal in memory and on screen
    subtotal = 0;
    document.getElementById('subtotal').innerHTML = 0;

    // for each reserved seat..
    var seat = document.getElementsByTagName('img');
    for (var i=0;i<seat.length;i++){
        if ( seat[i].isReserved ){
            seat[i].src = 'seat_0.png'; // turn green
            seat[i].isReserved = 0;     // no longer reserved
        }
    }
}

//reset all button
function resetPage(){
    window.location="home.html";
}

Open in new window

0
 

Author Comment

by:scotia2k11
Comment Utility
Wow, it does look quite different in bits doesnt it!  Im going to spend some time going through it just now as you suggested - I recognised the toggle ! from actionscript, so I can get my head around that part, & declaring the var at the top makes sense - it's just referred back to when its needed right?

I had included the math rounded to keep my decimal point in place if I had tickets at 5.25 for example, I had googled for a tutorial & it seemed to work so I kept  it :)  

The logic behind the reserve & unreserved certainly makes more sense, & I can see where I was getting muddled up with my curly's & semi's - as well as confusing ID & TagName quotes.  

It will take me a little while to go through it properly, so I'll leave you in peace for oooh, at least an hour ;)

Just mindblowing the knowledge you have - I cant thank you enough, honestly!  Im going to try getting the checkout button to enable tonight too, & after that?...sleep! :D
Ill post how I get on with your code & learning,
Many thanks :)
0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
It is a pleasure to work with you.

Here's how to format your numbers to have two decimal places:

http://www.mredkj.com/javascript/numberFormat.html

        document.getElementById('subtotal').innerHTML = subtotal.toFixed(2);

and

    document.getElementById('totalprice').innerHTML = total.toFixed(2);

Open in new window


Take out the line that does the "Round" and change the two lines above to format the numbers at the moment they are placed on the screen.

0
 

Author Comment

by:scotia2k11
Comment Utility
I wanted to again say a huge thank you, not only for easing my stress levels - but for making my first attempt at Javascript become more understandable.  I took time to go through everything you said, suggested & modified - & I dont hate javascript so much now *smiles* - It must be very difficult to help people like me who come from a photoshop background  & who have such limited knowledge of various languages but are thrown in at the deep end.  

I thought Id send you the link to my latest update - which although doesnt show the list of seats confirmed (I think Id have to assign every seat a unique ID in order to do this correctly) & although I even didnt begin to make the checkout button enable - I feel Ive at least begun a far better understanding of how to structure code, correctly assign functions & feel such relief - all thanks to your support.

I dont know how to send you "points" since I dont have any (unless I can purchase them) - but my only regret is that 500 is the maximum.  Your time, effort & patience are incredible.  I  really hope everyone else you help appreciates it as much.  

latest update

Again, huge thanks & I know I will seek you out in future.  I would like to cancel my free trail & just start to pay for membership here, is there a way I can do that?...(that doesnt include seats!!!) ...

scotia :D - who now has a broad grin, let alone a smile!
0
 
LVL 16

Accepted Solution

by:
sjklein42 earned 500 total points
Comment Utility
As you say, there is always more to do on a program, but this is great!

I could tell that you must be an artist - the web page you did is really nice, visually.  I hope they like it tomorrow.

I have only been doing ExpertsExchange for a couple weeks, and I actually don't have a subscription so I don't know how the "asking questions" part of the site works.  I signed up as an "expert" so I could see other people's answers for free, but I'm still not allowed to ask questions!  I got hooked right away.  It is really satisfying to help people like you get past some of the messy, arbitrary code that glues it all together inside.

I think you can still give me points even though you have a trial membership - are there buttons on my "solutions" that say to accept them as the answer?  I think that's how it works.  If not, we can find out.  Thanks.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now