Javascript tipping calculator

Question

I'm very new to Javascript, here's my problem I can't seem to get the last two boxes right and sorry for my messed up coding as i said i'm still very new to this.

function FigureIt() {
  DinCost = document.tip.dinCost.value;
  Tip15 = (DinCost * .15)
  Tip25 = (DinCost * .25)
  Din15 = (DinCost * .15) + (DinCost)
  Din25 = (DinCost * .25) + (DinCost)

  document.tip.tip15.value = Tip15;
  document.tip.tip25.value = Tip25;
  document.tip.dinner15.value = Din15;
  document.tip.dinner25.value = Din25;
}

<form name="tip">
  How much did you pay for dinner? &nbsp; $<input type="text" name="dinCost" id="dinCost"> <br>
  <input type="button" value="Calculate Tips" onclick="FigureIt()"> <br> <br> Amount of 15% tip: &nbsp; $<input type="text" name="tip15" id="tip15"> <br> Amount of 25% tip: &nbsp; $<input type="text" name="tip25" id="tip25"> <br> <br> Cost of dinner +
  15% tip: &nbsp; <input type="text" name="dinner15" id="dinner15"><br> Cost of dinner + 25% tip: &nbsp; <input type="text" name="dinner25" id="dinner25"> <br>
  <input type="reset" value="Erase">
</form>

use parseFloat DinCost = parseFloat(document.tip.dinCost.value); and you good to go. Becareful using Number(document.tip.dinCost.value) [ref](https://stackoverflow.com/a/13676265/62282) — Samuel Goldenbaum, Nov 17 '19 at 17:18

IgorK · Answer 1 · 2019-11-17T17:28:55.907

your input field has string value, you need numbers. try this:

function FigureIt() {
 DinCost = parseFloat(document.tip.dinCost.value);
 Tip15 = (DinCost * .15)
 Tip25 = (DinCost * .25)
 Din15 = (DinCost * .15) + (DinCost)
 Din25 = (DinCost * .25) + (DinCost)

  document.tip.tip15.value = Tip15;
  document.tip.tip25.value = Tip25;
  document.tip.dinner15.value = Din15;
  document.tip.dinner25.value = Din25;
}

<form name="tip">
  How much did you pay for dinner? &nbsp; $<input type="text" name="dinCost" id="dinCost"> <br>
  <input type="button" value="Calculate Tips" onclick="FigureIt()"> <br> <br> Amount of 15% tip: &nbsp; $<input type="text" name="tip15" id="tip15"> <br> Amount of 25% tip: &nbsp; $<input type="text" name="tip25" id="tip25"> <br> <br> Cost of dinner +
  15% tip: &nbsp; <input type="text" name="dinner15" id="dinner15"><br> Cost of dinner + 25% tip: &nbsp; <input type="text" name="dinner25" id="dinner25"> <br>
  <input type="reset" value="Erase">
</form>

score 1 · Accepted Answer · answered Nov 17 '19 at 17:09

1

Convert your dinner cost input to a number:

DinCost = Number(document.tip.dinCost.value);

answered Nov 17 '19 at 17:09

Tunn

1,506
16
25

Would be better to use parseFloat in this instance – Samuel Goldenbaum Nov 17 '19 at 17:15

Javascript tipping calculator

2 Answers2