HTML Calculator using Javascript

This site is best viewed in a modern browser with JavaScript enabled.

gavilatius

Alright, this is a 3 part problem (HTML/JS/CSS) and I need help for the last 2 parts:

the first part concerns the layout of the webpage, a basic calculator that allows the user to input the quantity and hit either the "Calculate" (which spits out the math in both "Add-on" and "Grand total" textboxes) or "Exit" (which gives a "thank you" pop-up and then brings them to a homepage) buttons.

If a user types in a negative number, 0 or anything more than 5 a pop-up will appear, or if the user calculates with any letters.

Javascript will handle the math while CSS will handle the formatting and popups

The javascript and/or the CSS portions must be either separate or in the HTML document.

I have the basic layout, it's everything else that I and 10 other people are stuck on
HTML code

<!DOCTYPE html>
<!-- EX02.html-->

<html lang = "en">
<head>

<title> Basic Computer Store </title>
				</head>

<body>
<h2> Welcome to the Basic Computer Store </h2>
<h3> choose your Basic Upgrades for a basic price </h3>

<img class = "Left" src = "download.png" alt = "Picture of computer"/>
<table>

<tr> 
<th>   </th>
<th>    </th>
<th> Base Price </th>
<th> $999.99 </th>
			</tr>
<tr> 
<th> Add-on </th>
<th> quantity </th>
<th> Add-on Price </th>
<th> Add-on Total </th>
			</tr>
<tr>
<td> 1.21 Jiggawatt Powersupply </td>
<td> <input type="text" name="PowerSupply" id="PowerSupply" alt="PowerSupply" value=" " size = "2" /> </td>
<td> $1985 </td>
<td> <input type="text" name="PowerSupplyPrice" size = "2" /> </td>
</tr>

<tr>
<td> Brainpower (tm) Memory Upgrade </td>
<td> <input type= text" name="Memory" size="2" /> </td>
<td> $1337 </td>
<td> <input type="text" name="MemoryPrice" size="2" /> </td>
</tr>

<tr>
<td> Mouse </td>
<td> <input type = "text" name = "Mouse" size = "2" /> </td>
<td> $1 </td>
<td> <input type = "text" name = "MousePrice" size = "2" /> </td>
</tr>

<tr>
<td>   </td>
<td>   </td>
<td> Grand Total </td>
<td> <input type = "text" name = "TotalPrice" value =" " size = "2" /> </td>
</tr>

<p>
<input type="button" value="Calculate" onClick="">
<a href = "http://www.hpu.edu/"> <input type="button" value="exit" onClick=""> </a>

I have the basic CSS popup code but I don't know how to implement it to the exceptions above (-n, 0, 6 or letters)

<script type="text/javascript"> 
<!--
	function Over() { 
		alert("the amount you ordered is too much, too few, or undefined");
 	}
--> 
</script>
</head>
<body>
	<script type="text/javascript">
	<!--
		Over();
	-->
	</script>

Kevin2

Designing forms is very much about human behavior. If there's a way to screw up something it will happen. When you want accurate data you can't count on a user to enter only certain numbers, or only positive numbers, etc. Yes, you can script against it, but it's much easier just to use a <select> input tag. That way you're assured the number entered will fit your parameters.

Secondly, if you write to an <input type="text"> tag, you're leaving that tag open to "adjustment" by the user, making the data unusable to you.

Third, I always like to give the user "instant results". And I like "pretty printing" in case the user really wants to print the page.

With all that in mind, here's a rebuild of your page. I've commented things so hopefully you'll see what's going on.

<!DOCTYPE html>
<!-- EX02.html-->

<html lang = "en">
<head>
<meta charset="utf-8">
<title> Basic Computer Store </title>
<script src="calculate.js"></script>
</head>

<body onload="total()">	<!-- runs the total for the first time and displays it in the Grand Total -->
<h2> Welcome to the Basic Computer Store </h2>
<h3> choose your Basic Upgrades for a basic price </h3>

<img class = "Left" src = "download.png" alt = "Picture of computer"/>
<table>

<tr> 
<th colspan="3" style="text-align:right;"> Base Price </th>
<th style="text-align:right;"> $<span name="total">999.99</span> </th>
</tr>

<tr> 
<th> Add-on </th>
<th> quantity </th>
<th> Add-on Price </th>
<th> Add-on Total </th>
</tr>

<tr>
<td> 1.21 Jiggawatt Powersupply </td>
<td> <select id="ps" name="ps" onchange="calc(this,pscost,pstot)">	<!--Each time this changes pass the id's to the calc function and run it-->
  <option value=""></option>
  <option value="1">1</option>		<!--Add or remove options/numbers as needed-->
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  </select> </td>
<td> $<span id="pscost">1985</span> </td>
<td style="text-align:right;"> $<span id="pstot" name="total"></span> </td>
</tr>

<tr>
<td> Brainpower&trade; Memory Upgrade </td>
<td> <select id="mem" name="mem"  onchange="calc(this,memcost,memtot)">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  </select> </td>
<td> $<span id="memcost">1337</span> </td>
<td style="text-align:right;"> $<span id="memtot" name="total"></span> </td>
</tr>

<tr>
<td> Mouse </td>
<td> <select id="mouse" name="mouse" onchange="calc(this,mousecost,mousetot)">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  </select> </td>
<td> $<span id="mousecost">1</span> </td>
<td style="text-align:right;"> $<span id="mousetot" name="total"></span> </td>
</tr>

<tr>
<td colspan="3" style="text-align:right;"> Grand Total </td>
<td style="text-align:right;"> $<span id="total" name="gtotal"></span> </td>
</tr>

</table>
<p><a href = "http://www.hpu.edu/"> <input type="button" value="exit" onClick=""> </a></p>
</body>
</html>

Save this as calculate.js in the same folder as your page:

  function calc(el,cost,tot){		// create variables from the id's passed from the page, allowing this function to be reused
	var	x = el.value,		// # selected
		y = cost.innerHTML,	// cost per item.
		t = x*y;		// multiply # x cost
	tot.innerHTML = t;		// display subtotal on page
	total();			// go to "function total()" below to add all the subtotals to the base price, this retotals everything when any number is changed by the user.
  }

  function total(){			// this function runs on pageload to drop an initial grand total (the base price) on the page.
	var	sub = document.getElementsByName("total"),	// get all elements with the name="total" attribute
		t = document.getElementById("total").innerHTML;	// get the current amount of the grand total and create the variable
	t=0;							// zero the grand total so new numbers don't get added to old totals if someone changes a 2 to a 1 e.g.
     for(var i = 0; i < sub.length; i++){			// iterate through all the subtotals
	var	a = sub[i].innerHTML,				// on each iteration, get the number, add it to the grand total, and create a new grand total
		b = 1*a+1*t,
		b2 = b.toFixed(2);				// forces grand total to 2 decimal places -- with large numbers it was going beyond that
	t = b2;
	document.getElementById("total").innerHTML = t;		// display the grand total on the page
     }
 }

Lastly, you didn't indicate that the data would be submitted online. If so, it's fairly trivial to copy the data into hidden inputs for form handling purposes.

gavilatius

alright I've cleaned up the HTML file to give the basic picture format I MUST ADHERE TO... teacher's orders.

<!DOCTYPE html>
<html lang = "en">
<head>
<title> nochangehtml.html </title>
<meta charset = "utf-8" />
<script type = "text/javascript" src = "computerjs.js">
</script>
</style>

</head>
<body>
<form action = "">
<h1> Calvin's Computers </h1>
<h3> Basic Things For Basic People </h3>

<table>

<tr>
<th>   </th>
<th>   </th>
<th> Base Price   </th>
<th> 999.99</th>
</tr>

<tr>
<th> Add-on </th>
<th> Quantity </th>
<th> Add-on Price </th>
<th> Add-on Total </th>
</tr>

<tr>
<th> Power Supply</th>
<td> <input type = "type" id = "powerSupply" size = "2" value = "0" /> </td>
<td> 3.50 </td>
<td> <input type = "text" size = 5 id = "power" onfocus = "this.blur();" /> </td>
</tr>

<tr>
<th> Keyboard </th>
<td> <input type = "type" id = "keyboard" size = "2" value = "0" /> </td>
<td> 3.75 </td>
<td> <input type = "text" size = 5 id = "keyboard" onfocus = "this.blur();" /> </td>
</tr>

<tr>
<th> Mouse </th>
<td> <input type = "type" id = "mouse" size = "2" value = "0" /> </td>
<td> 4.50 </td>
<td> <input type = "text" size = 5 id = "mouse" onfocus = "this.blur();" /> </td>
</tr>

<tr>
<td>  </td>
<td>  </td>
<td> <input type = "button" value = "Grand Total" onclick = "computeCost();" /> </td>
<td> <input type = "text" size = 5 id = "cost" onfocus = "this.blur();" /> </td>
<td> <a href = "http://www.hpu.edu/"> <input type="button" value="exit" onClick=""> </a> </td>
</tr>

</table>
</form>
</body>
</html>

I know there are mistakes in the coding still, and what I need to know is after a user types in the <input type = "type" id = "powerSupply" size = "2" value = "0" /> area, the area that says <input type = "text" size = 5 id = "power" onfocus = "this.blur();" /> is the one that spits out the ROW'S math

the computeCost function works like a charm but I really don't know about the computePower functions... can I even cal them in the same file or will I have to do something different.

//computerjs.js

function computeCost()
{
var power = document.getElementById("power").value
var keyboard = document.getElementById("keyboard").value
var mouse = document.getElementById("mouse").value

document.getElementById("cost").value = 
totalCost = 999.99 + power * 3.50 + keyboard * 3.75 + mouse * 4.50;
}

function computePower()
{
var power = document.getElementById("power").value
document.getElementById("power").value = 
totalPower = power * 3.50;
}

function computePower()
{
var power = document.getElementById("power").value
document.getElementById("power").value =
totalPower = power * 3.50; is sketchy for me, and I need to know how to repeatedly call on the "power" value in both text imputs in the HTML document

also no data will be saved , this is basically just an exercise that will be used over and overagain in a bigger Picture encompassing CSS and SQL lessons.

gavilatius

also, sorry to bump post but I also need to know how to put

<script type="text/javascript"> 
<!--
	function Mistake() { 
		alert("the amount you ordered is too much, to few, or is undefined");
 	}
--> 
</script>
</head>
<body>
	<script type="text/javascript">
	<!--
		Mistake();
	-->
	</script>

in right after the user presses "Grand Total" and then computes after the user presses "ok"

JMRKER

Several problems.

You cannot have duplicate id values. Not allowed in JS
Information is passed as strings in functions so you need to convert to a number
either with Number() or value*1 or parseInt() or parseFloat()
You will need to modify the Mistake() function for values less than zero.
You should check the error console if you are using FF or Chrome browsers for testing.
Other errors you will find by doing the following:
Match your attempt to this working script and post back if unclear.

<!DOCTYPE html>
<html lang = "en">
<head>
<title> nochangehtml.html </title>
<meta charset = "utf-8" />
<script type = "text/javascript" src = "computerjs.js">
</script>
</style>

</head>
<body>
<form action = "">
<h1> Calvin's Computers </h1>
<h3> Basic Things For Basic People </h3>

<table>

<tr>
<th>   </th>
<th>   </th>
<th> Base Price   </th>
<th> 999.99</th>
</tr>

<tr>
<th> Add-on </th>
<th> Quantity </th>
<th> Add-on Price </th>
<th> Add-on Total </th>
</tr>

<tr>
<th> Power Supply</th>
<td> <input type="type" id="powerAmt" size="2" value="0" onblur="addOption(this.id,this.value,3.50,'powerTot')" /> </td>
<td> 3.50 </td>
<td> <input type="text" size=5 id="powerTot" readonly /> </td>
</tr>

<tr>
<th> Keyboard </th>
<td> <input type = "type" id = "keyboardAmt" size = "2" value = "0" onblur="addOption(this.id,this.value,3.75,'keyboardTot')"/> </td>
<td> 3.75 </td>
<td> <input type="text" size=5 id="keyboardTot" readonly /> </td>
</tr>

<tr>
<th> Mouse </th>
<td> <input type="type" id="mouseAmt" size="2" value="0" onblur="addOption(this.id,this.value,4.50,'mouseTot')"/> </td>
<td> 4.50 </td>
<td> <input type="text" size=5 id="mouseTot" readonly /> </td>
</tr>

<tr>
<td>  </td>
<td>  </td>
<td> <input type="button" value="Grand Total" onclick="computeCost();" /> </td>
<td> <input type="text" size=5 id="cost" readonly /> </td>
</tr>

</table>
</form>

<a href = "http://www.hpu.edu/"> <input type="button" value="exit" onClick=""> </a>

<script type="text/javascript">  //computerjs.js

function computeCost() {
  var totalCost = 999.99;
      totalCost += Number(document.getElementById('powerTot').value);
      totalCost += Number(document.getElementById('keyboardTot').value);
      totalCost += Number(document.getElementById('mouseTot').value);
  document.getElementById("cost").value = totalCost.toFixed(2);
}

function addOption(IDSv,amount,cost,IDSt) {
  var amt = Number(document.getElementById(IDSv).value) || 0;
  if (amt == 0) { Mistake(); setFocus(IDSv); }
  var tot = amt * cost;
  document.getElementById(IDSt).value =  tot.toFixed(2);
  computeCost();
  return tot;
}

function Mistake() { 
  alert("the amount you ordered is too much, to few, or is undefined");
}

</script>

</body>
</html>

Good Luck!