SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    0 Post(s)
    0 Thread(s)

    Percentage/price script

    Hey everyone,

    I'm teaching myself a couple of languages this summer and I'm currently learning Javascript. My friend is a CS major in college and he gave me a couple of his assignments to mess around with for fun. I'm working on this percentage/price script right now that I initially thought was really easy, but is currently giving me some trouble. I've successfully created a GUI, but my function isn't working.

    The main goal of the project is that the function needs to return a final price based on two given percentages. There are two coffee types - Espresso ($5.99 per unit) and Sumatra ($8.99 per unit). I want to create a script that will allow me to mix the two types of coffee into one unit. The total percentage of this unit, of course, must equal 100%.

    On the GUI, one textbox is for the percent Espresso and another is for the percent Sumatra. If the sum of these percents, equals one hundred, then the user can click the "Find Price" button and the final price will be displayed in a textbox below.

    I just don't know how to correctly get the function to work. Once the percents are inputted, I want it to check if the sum of the percents equals 100. If it doesn't I want an alert box to pop up. If it does equal 100, I want it to do generate the final price by the formula ((Espresso * 5.99 + Sumatra * 8.99) / 100).

    Here's the code I have so far:

    <script type="text/javascript">
    function CoffeeBlend() {
    var EspressoPercent = document.form1.first.value
    var SumatraPercent = document.form1.second.value
    if (EspressoPercent + SumatraPercent = 100)
       FinalPrice = (((EspressoPercent * 5.99) + (SumatraPercent * 8.99)) / 100)
    Else {
       onClick='alert("Your percentages must sum to 100. \n Click OK to contine.")'>
    <i><small>Please note that the sum of the percentages below must equal 100.</small></i>
    <form name="form1">
    <table align="left">
          Percent Espresso in the blend: <input type="text" size="2" name="first">%
          //text and text box for the Espresso percentage
          Percent Sumatra in the blend: <input type="text" size="2" name="second">%
          //text and text box for the Sumatra percentage
          Final Price: $<input type="text" readonly="readonly" size="4" name="answer">
          //text box for the blend's final price
          <input type="button" value="Find Price" onclick="CoffeeBlend()">   
          //button that generates the final price
          <input type="reset" class="gain" value="Clear Fields">
          //an extra button that clears the text boxes
    Am I going about the script correctly? All it needs is an if-else statement and the formula above. Should I have it in the head or the body?

    Thanks for your help.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    0 Post(s)
    0 Thread(s)
    Welcome to SitePoint Forums, wress44.

    1) You need to convert the values from strings to numbers. Here's one way:
    var EspressoPercent = parseFloat(document.form1.first.value)||0;
    var SumatraPercent = parseFloat(document.form1.second.value)||0;
    2) "=" is an assignment operator. If you want to check if two things are equal, use the "==" operator.

    3) You don't assign FinalPrice to anything.

    4) "else" must be lowercase.

    5) Why are you trying to set onclick? Except in 2 special cases, event handlers are functions, not strings.

    P.S. Your HTML code could be better written.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Posting Permissions

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