-1

I am trying to make a form that allows for the user to enter a value and then have a calculation performed on that value and the result then displayed in a alert box. I cannot seem to figure out what the problem is. Any help would be appreciated. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<html>
<head>
<title>CalcShipping</title>
<script type="text/javascript">

function AddShipping(){
    var PurchasePrice = documentGetById('TextInput'.value;
    var Shipping;                       
    if (PurchasePrice <= 25){
        Shipping = 1.5;
    }
    else{
        Shipping = PurchasePrice * 10 / 100;
    }
    var FinalPrice = PurchasePrice + Shipping;
    alert ('FinalPrice');

</script>
</head>
<body>
<p id="FinalPriceParra"></p>
<form>   Enter Purchase Price <input type="text" id="TextInput" value=""/><br/> 
    <input type="button" value="Submit" onclick="AddShipping()";/></form>
</body>
</html>
ic3b3rg
  • 14,629
  • 4
  • 30
  • 53
user3247096
  • 5
  • 1

2 Answers2

1
  1. Missing to close the brace.
  2. missed to add .
  3. documentGetById is wrong replace it with document.getElementById
  4. Missing to close } the method AddShipping
var PurchasePrice = documentGetById('TextInput'.value;

correct it as 

var PurchasePrice = document.getElementById('TextInput').value;

After clearing those errors, now it is working in fiddle

FYI: Since the textbox is going to handle only the numeric values I would suggest you to use HTML5 number input type or Restricting input to textbox: allowing only numbers and decimal point using Javascript.

Updates:

This is because by default the value of textbox is string so "10" + 1.5 = 101.5. To overcome this, you need to parse the textbox value as number like

var PurchasePrice = +document.getElementById('TextInput').value;
                    |_________ parses the textbox value as number

jsfiddle

Community
  • 1
  • 1
Praveen
  • 55,303
  • 33
  • 133
  • 164
  • I cannot get the math to work right. After making those changes (thanks by the way) I still am having a problem. If I enter 10 the result is 101.5, 20 results 201.5. It is just pushing the two numbers together, not adding them. It does the same if I use a number > 20, 100 = 10010. I know the problem lies in the math equation, but I don't see where. Do I need to declare all the values as float? IF so, where do I place that ? – user3247096 Feb 01 '14 at 20:03
  • @user3247096 I have updated my answer, take a look at it. Hope you can understand it. – Praveen Feb 01 '14 at 20:21
  • 1
    You are awesome! That was all it needed. Thanks to everyone for their help. I know these may seem like dumb questions, but I am just beginning to learn and I just couldn't figure it out to save my life. Thanks so much! – user3247096 Feb 02 '14 at 23:27
  • @user3247096 You're welcome. there is no issue in asking beginner's question unless you didn't try it. Whenever you post question regarding front end techs, check the browser console for any errors. – Praveen Feb 03 '14 at 04:24
0

You code has some problems.

  1. You should close your function by }.
  2. Change var PurchasePrice = documentGetById('TextInput'.value; to varPurchasePrice = document.getElementById('TextInput').value;.
  3. Change var FinalPrice = PurchasePrice + Shipping; to var FinalPrice = parseFloat(PurchasePrice) + Shipping, PurchasePrice is a string because it's returned from an input, so you need to convert it to a number.
  4. Change alert ('FinalPrice'); to alert(FinalPrice);, you need to alert the variable not a string.
  • Thanks for the help. You explained it very simply, and that helped me to understand exactly what I did wrong. Thanks again! – user3247096 Feb 02 '14 at 23:28