Changing a value inputted in a form from a string to an integer javascript

Question

I'm very much a beginner to JavaScript and am trying to complete a simple bill splitting exercise. Into a HTML form you input the price of a meal, how many people are paying, and how much of a tip you want to leave, and then it is supposed to give the price that each person should pay. When I put in values of say Price: 100, Tip:0, Number of people: 2, I expect it to give a value of 50, but it gives 500. I believe this is because it is recognizing the inputs as strings as opposed to integers.

I have attempted converting the strings using Number(), and parseInt(), but neither of these seem to have worked, instead giving errors that the values are then unidentified.

  const price = document.querySelector("#price");
  const numPeople = document.querySelector("#number-people");
  const tip = document.querySelector("#tip");
  const errorMsg = document.querySelector("#error-msg");
  const resultDisplay = document.querySelector("#result");

  form.addEventListener("submit", onSubmit);

function onSubmit(e) {
  e.preventDefault();
  console.log("BUTTON CLICKED"); // CONFIRM BUTTON PRESSED
  if(price.value === "" || numPeople.value === "" || tip.value === "") { // SIMPLE VALIDATION
      errorMsg.innerHTML = "ENTER ALL FIELDS"; // ENTER HTML INTO error-msg DIV 
      conole.log("NOT ALL FIELS WERE ENTERED"); // SEND ERROR TO LOG
  } else {
      console.log("SUCCESS"); // SEND CONFIRMATION TO LOG
      console.log(`Price is ${price.value}, number of people is ${numPeople.value} and tip is ${tip.value}`); // SEND VALUES ENTERED TO LOG
      const result = (price.value + tip.value) / numPeople.value; // COMPLETE CALCULATION
      console.log(result); // SEND THE RESULT TO THE LOG
  }
}

I expect the output of (100 + 0) / 2 to be 50, but it is 500.

When using parseInt() and Number() I did:

const result = (parseInt(price.value) + parseInt(tip.value)) / parseInt(numPeople.value);

and Number() respectively.

Sorry if this is a simple question, any help would would be appreciated.

Please show us *how* you tried to use `Number` and `parseInt` — Bergi, Jul 08 '19 at 17:59
Thanks, that should work quite fine. What was the exact error message? — Bergi, Jul 08 '19 at 18:06
After trying to recreate it to see what error message it was giving me it seems to be working, it must have been a minor error on my part, thanks for the help anyway! — oliver thomas, Jul 08 '19 at 18:12

score 1 · Accepted Answer · answered Jul 08 '19 at 17:57

1

You are in the right path, but you should use Float instead of Int, because prices could have a decimal part which parseInt will ignore

var result = (parseFloat(price.value) + parseFloat(tip.value)) / parseInt(numPeople.value)

Beware it will give you a float with full presicion, you can then format the number as string with the number of decimals you wish.

answered Jul 08 '19 at 17:57

KnF

166
10

Thank you! This worked. Any idea why this didn't work at all with parseInt? – oliver thomas Jul 08 '19 at 18:02
I don't know how you called parseInt.. maybe you did `parseInt(price.value + tip.value)`? that would make a *concatenation* of both strings first and then parse the integer. Notice how I called parseFloat for each term of the equation – KnF Jul 08 '19 at 18:04
If answer is correct please approve :) – KnF Jul 08 '19 at 18:05
Sorry, approced it now – oliver thomas Jul 08 '19 at 18:12

Changing a value inputted in a form from a string to an integer javascript

1 Answers1