How to use javascript in HTML document to create a simple cost calculator
I start when it comes to HTML coding. I am trying to complete an assignment for an online computer course. I emailed my professor but he was not very helpful on this assignment. I have to create a simple cost calculator that will allow the user to add quantity and price per item for three items. After clicking onclick, the total price is displayed. I had a similar assignment last week and was able to complete the coding and design myself. I cannot figure it out. This is the code I have so far.
<html>
<head> <title> Name </title>
<br/> <br/>
<h2> <p style="text-indent: 22em;"> <FONT SIZE="7" <center> Easy Cost Calculator</center> </FONT SIZE> </h2>
<style type="text/css">
body {background-color:light blue;
color: blue;
font-family: rockwell;
}
</style>
</head>
<body>
<body style="background:#006400">
<form> <br/>
<center> <table border="2" cellpadding="25" cellspacing="25" bgcolor=lightgreen>
<tr>
<th> # of Items </th>
<th> Cost Per Item</th>
<th> Item Total</th> </tr>
<tr> <td> <input type="text" name="quantity1" size="20"> </td><td> <input type="text" name="cost per item1" size="20"> </td><td> <input type="text" name="item total1" readonly> </td> </tr>
<tr> <td> <input type="text" name="quantity2" size="20"> </td> <td> <input type="text" name="cost per item2" size="20"> </td> <td> <input type="text" name="item total2" readonly> </td> </tr>
<tr> <td> <input type="text" name="quantity3" size="20"> </td> <td> <input type="text" name="cost per item3" size="20"></td> <td> <input type="text" name="item total3" readonly> </td> </tr>
<tr> <center> <td> <input type="text" name="Total" readonly> </td> <td> <input type="button" value="Calculate Total" onclick='
var q1 = document.forms[0].quantity1.value;
var q2= document.forms[0].quantity2.value;
var q3= document.forms[0].quantity3.value;
var cpi1 = document.forms[0]. cost per item1.value;
var cpi2= document.forms[0]. cost per item2.value;
var cpi3= document.forms[0]. cost per item3.value;
var st11= q1*cpi1;
document.forms[0].item total1.value= st11;
var st2= q2*cpi2;
document.forms[0].item total2.value= st2;
var st3= q3*cpi3;
document.forms[0]. item total3.value= st3;
var tc =st11+st2+st3 ;
document.forms[0].total.value= tc;
'>
</button> </center> </td> </tr>
</table>
<br/> <br/>
</center>
</form>
</body>
</html>
source to share
You have several problems here:
- Your HTML is not formatted correctly (you have tags
h2
,p
andbr
in<head>
, tags only display tags<body>
(you also have two open tags<body>
) - you should not use spaces in name attributes (e.g.
document.forms[0].item total2.value= st2;
) as this will make it difficult to reference them with javascript, replace them with underscores, or just remove the spaces. - you will interfere with the javascript tone in the inline event handler, which is a bug, everything should be wrapped in its own tag
<script>
Start by providing your button with an attribute id
so you can easily access it using Javascript:
<input type="button" value="Calculate Total" id="total" />
Then, before the closing tag, </body>
add a new tag <script>
and get a handle to your button and move all your inline logic into your event handler onclick
:
// get a handle to your button by referencing its id attribute
var button = document.getElementById('total');
// programmatically add your click handler
button.onclick = function(){
var q1 = document.forms[0].quantity1.value;
var q2= document.forms[0].quantity2.value;
var q3= document.forms[0].quantity3.value;
var cpi1 = document.forms[0].costperitem1.value;
var cpi2= document.forms[0].costperitem2.value;
var cpi3= document.forms[0].costperitem3.value;
var st11= q1*cpi1;
document.forms[0].itemtotal1.value= st11;
var st2= q2*cpi2;
document.forms[0].itemtotal2.value= st2;
var st3= q3*cpi3;
document.forms[0].itemtotal3.value= st3;
var tc =st11+st2+st3 ;
document.forms[0].total.value= tc;
}
There are many more improvements that can be made here, but this should be enough to get you started
source to share
Since this is an assignment, I don't want to give you the whole answer, but this should get you started.
-
You will notice that you can access yours
JavaScript
by specifyingid
-
If you are storing your JavaScript in a single file, then you need to put it in tags
<script></script>
. Otherwise, you can link to it by creating a separate JavaScript file. For example:<script src="JavaScriptFile.js"></script>
This will be placed inside your tags<head></head>
.
In HTML, you want to do the following:
<input type="button" value="Calculate Total" id="calculations">
Your JavaScript should look like this:
document.getElementById('calculations').onclick = function() {
var q1 = document.forms[0].quantity1.value;
var q2 = document.forms[0].quantity2.value;
var q3 = document.forms[0].quantity3.value;
var cpi1 = document.forms[0].cost1.value;
var cpi2 = document.forms[0].cost2.value;
var cpi3 = document.forms[0].cost3.value;
var st11 = q1 * cpi1;
document.forms[0].total1.value = st11;
var st2 = q2 * cpi2;
document.forms[0].total2.value = st2;
var st3 = q3 * cpi3;
document.forms[0].total3.value = st3;
var tc = st11 + st2 + st3;
document.forms[0].total.value = tc;
}
source to share
First, I would use the id
JavaScript attribute over the attribute name
. You can have both if you like, but it's much easier to use getElementById
(IMO). Please note that the id
attributes must be unique.
<input type="text" id="costPerItem1" name="cost per item1" size="20">
<input type="text" id="costPerItem2" name="cost per item2" size="20">
...
Second, I would be very surprised if your JavaScript will work, but despite this, it is better to move your javascript to a tag <script>
and create a function that you can reference in your HTML. You can also use document.getElementById("the_element_id");
to reference your input tags in your javascript. So every element you need to reference in JavaScript add an attribute to it id
!
A common practice is to place tags <script>
at the bottom of your HTML file, but still within the tag </html>
.
<script>
var onClick = function(event) {
var q1 = document.getElemenById('quantity1').value;
var q2 = document.getElemenById('quantity2').value;
var q3 = document.getElemenById('quantity3').value;
//var q1 = document.forms[0].quantity1.value;
//var q2= document.forms[0].quantity2.value;
//var q3= document.forms[0].quantity3.value;
var cpi1 = document.getElementById('costPerItem1').value;
var cpi2 = document.getElementById('costPerItem2').value;
var cpi3 = document.getElementById('costPerItem3').value;
//this is invalid javascript because of the whitespace.
//var cpi1 = document.forms[0]. cost per item1.value;
//var cpi2= document.forms[0]. cost per item2.value;
//var cpi3= document.forms[0]. cost per item3.value;
var st11= q1*cpi1;
//this is also invalid javascript because of the whitespaces "item total"
document.getElementById('itemTotal1').value = st11;
//document.forms[0].item total1.value= st11;
var st2= q2*cpi2;
document.getElementById('itemTotal2').value = st2;
//document.forms[0].item total2.value= st2;
var st3= q3*cpi3;
document.getElementById('itemTotal3').value = st3;
//document.forms[0]. item total3.value= st3;
var tc = st11 + st2 + st3;
//this is valid javascript, but to be consistent, and in case
//you ever add more forms in the same page...
//document.forms[0].total.value= tc;
document.getElementById('total').value = tc;
};
</script>
Now your HTML ...
<input type="button" value="Calculate Total" onclick="onClick(event)" />
Third, your HTML structure is wrong. A typical HTML structure looks something like this:
<html>
<head>
<title>A Title</title>
</head>
<body>
<!-- your content --->
</body>
</html>
A tag <head>
is a tag for all metadata-related information about your website. But it has nothing to do with your actual content. Therefore, the tags <head>
should contain only tags such as <meta>
, <link>
, <title>
, etc.
The tag <body>
is the place for your actual content. You must not have more than 1 tag <head>
or <body>
.
<h2> <p style="text-indent: 22em;"> <span style="text-align:center;font-size:7px"> Easy Cost Calculator</span> </h2>
Must be in your body. Also note that I changed the tag <center>
and tag <FONT SIZE>
to one tag <span style="text-align:center;font-size:7px;">
.
And finally ...
<body>
<body style="background:#006400">
should be simple
<body style="background:#006400">
source to share