www.webdeveloper.com
Results 1 to 3 of 3

Thread: Price comparison calculator

  1. #1
    Join Date
    Oct 2011
    Posts
    2

    Price comparison calculator

    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

  2. #2
    Join Date
    Sep 2009
    Posts
    159

    See if this works.

    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.
    Got jQuery problem? jQuery vault can help you find solutions. Give it a try and find out.

    Click jQuery vault to help us help you.

  3. #3
    Join Date
    Oct 2011
    Posts
    2
    thanks a lot mate... you just made my day...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles