Price comparison calculator

**gsvavarsson** · 10-11-2011 10:26 AM

hi, I'm new to JS but i'm trying to make a price comparison calculator for a friend of mine.

But i can't figure out how to have the answer overwrite the question and forms.
I thought about a switch statement but i don't quite know how to use it.

But since i messed all attempts up i'll just send in one that works.

This is what i hope it will look like.

Code:

<HTML>
<HEAD>
<TITLE>price Calc</TITLE>

<SCRIPT LANGUAGE="JavaScript">

 
function CalculateSum(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A - (B*0.98);
}

</SCRIPT>
</HEAD>

<BODY>


<FORM NAME="Calculator" METHOD="post">
<P>Current montly amount: <INPUT TYPE=TEXT NAME="input_A" SIZE=10></P>
<P>Cups per month.: <INPUT TYPE=TEXT NAME="input_B" SIZE=10></P>
<P><INPUT TYPE="button" VALUE="Calculate" name="AddButton" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form); document.write(You would save"></P>
<P>You would save = <INPUT TYPE=TEXT NAME="Answer" SIZE=12></P>
</FORM>

</BODY>
</HTML>

best regards... Gisli

**pactor21** · 10-11-2011 02:14 PM

Code:

<HTML>
<HEAD>
<TITLE>price Calc</TITLE>

<SCRIPT LANGUAGE="JavaScript">

 
function CalculateSum(form)
{
	var A = parseFloat(form.input_A.value);
	var B = parseFloat(form.input_A.value);
	
	var save = A - (B*0.98);
	
	var result = '<p>You will save:</p>';
	result += save;
	result += '<P><INPUT TYPE="submit" NAME="Calculate" SIZE=12></P>';

	document.getElementById('view').innerHTML = result;
}

</SCRIPT>
</HEAD>

<BODY>

<div id="view">
	<FORM NAME="Calculator" METHOD="post">
	<P>Current montly amount: <INPUT TYPE="TEXT" NAME="input_A" SIZE="10"></P>
	<P>Cups per month.: <INPUT TYPE="TEXT" NAME="input_B" SIZE="10"></P>
	<P><INPUT TYPE="button" VALUE="Calculate" name="AddButton" onClick="CalculateSum(this.form);"></P>
</FORM>
<div>

</BODY>
</HTML>

The whole idea is determine what part of the HTML is going to change when the javascript triggers, then have a div element contain it and name that div with an id of your choice.

Then in the javascript function, build the result content in a variable (in this case, I named it result). When you are done stuffing everything you want in the result variable. Print it in the container div you created above using innerHTML.

Hope it's not that hard to understand to follow my code.

**gsvavarsson** · 10-11-2011 02:37 PM

thanks a lot mate... you just made my day...

Thread: Price comparison calculator

Thread Tools

Display

Price comparison calculator

See if this works.

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions