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.
//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>
<a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn("seat")' onmouseout='seatOff("seat")'></a>
<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>
//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";
}
<!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()"/>
<input type="button" value='Cancel' id='cancel' onClick="cancelSeats()";>
<input type="button" value="Reset" id="reset" onclick="resetPage()" />
<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>
//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";
}
total = 0;
seat[i].isReserved = 0;
//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');
}
}
//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";
}
document.getElementById('subtotal').innerHTML = subtotal.toFixed(2);
and
document.getElementById('totalprice').innerHTML = total.toFixed(2);
If you are experiencing a similar issue, please ask a related question
Title | # Comments | Views | Activity |
---|---|---|---|
Why does my button disappear? | 3 | 28 | |
Use a select control to call a javascript function | 5 | 29 | |
A form to still have contents even if some are wrong | 10 | 46 | |
How can I upload multiple images from a HTML form? | 2 | 18 |
Join the community of 500,000 technology professionals and ask your questions.
Connect with top rated Experts
22 Experts available now in Live!