Hi guys,
I'm working on a code at the moment which is like a book shop. I want the program to allow the user to enter a book name and price then add it and after adding the books and its corresponding price, the program should calculate the total price.
I have been working on this (so it is rough) but I think I have managed it bar one slight problem. The book name entered comes up as 'undefined' after adding to basket.
I've played about with it but still no luck.
<html>
<head>
<script type="text/javascript">
var bookname = new Array();
var bookprice = new Array();
//set functions for the book name entry
function insert1(value)
{
bookname[bookname.length]=value;
}
//set function for the book price entry
function insert2(value)
{
bookprice[bookprice.length]=value;
}
//display inserted name
function showname()
{
var string ="<b>Book Name</b><br>";
for(i = 0; i < bookname.length ; i++)
{
string = string + bookname[i]+"<br>";
}
if (bookname.length)
{
document.getElementById('myDiv1').innerHTML = string; //if name is entered, show value entered on myDiv section
}
}
//display inserted price
function showprice()
{
var string="<b>Book Price</b><br>";
for(i = 0; i < bookprice.length ; i++)
{
string = string + " " + bookprice[i]+"<br>";
}
if(bookprice.length)
{
document.getElementById('myDiv2').innerHTML = string;
}
}
//set function to calculate the total price
function totalprice()
{
var total = 0;
for(var i = 0; i < bookprice.length; i++)
{
var thisvalue = parseFloat(bookprice[i]); //decimal (allows pence cost as well (ie. £5.50))
if(!isNaN(thisvalue)) //!isNaN() = returns true if value is not a number
{
total += thisvalue;
}
}
alert( "The total price is £"+total.toFixed(2)); //shows price to 2 decimal places
}
</script>
</head>
<body>
<h3>Book Purchase</h3>
<!--positions for book entry-->
<form name="form1">
<table width="407">
<tr>
<td width="154" align="right"><b>Book Name</b>
<td width="9"><b> :</b>
<td width="224">
<input type="text" name="name"/>
</tr>
<tr>
<td width="154" align="right">
<td width="9">
<td width="224">
</tr>
<tr>
<td width="154" align="right">
<td width="9">
<td width="224">
</tr>
</table>
</form>
<!--positions for book price-->
<form name="form2">
<table width="407">
<tr>
<td width="154" align="right"><b>Book Price :</b>
<td width="9"><b> £</b>
<td width="224">
<input type="text" name="cost"/>
</tr>
<tr>
<td width="154" align="right">
<td width="9">
<td width="224">
</tr>
<tr>
<td width="154" align="right">
<td width="9">
<td width="224">
<input type="button" value="Add To Basket" onclick="insert1(this.form.name.value),showname(); insert2(this.form.cost.value),showprice();"/> <!--the button comprimises of two functions (show both name and price together-->
</tr>
</table>
</form>
<tr>
<table width = 100% >
<td width = 300px>
<div id="myDiv1"></div>
</td>
<td width = 300px>
<div id="myDiv2"></div>
</td>
<td width 80%>
</td>
</tr>
</table>
<br><br><input type="button" value="Total Price" onclick="totalprice();" /> <!--button to calculate the total price added-->
<input type="button" Value="Print This Screen" onclick="window.print();"/> <!--button to print the window-->
</body>
</html>
I've put in little comments to help me as I am not an expert in this field and make it simpler for myself!
Can anybody suggest how I may solve this problem?
Any help is much appreciated!
