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.
Code:
<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?
<input id="butonID" 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-->
there's nothing wrong with referring to a form as this.form, in fact it is a much more efficient way to access the form, rather than document.forms[0]... or document.myform...
but the button and the target element have to be in the same form
otherwise you will run into problems. undefined problems
for it to work you need for everything to be in the one form. you currently have two - which is why one variable is accessed and the other comes up undefined
Thanks a lot! Its worked now.
It's those small things you fail to notice ha, last time I did a program a simple "}" was missing and I was pulling my hair out trying to fix it!
Reply With Quote
Originally Posted by jamesy23
Bookmarks