Question 188039 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to make this computation same like my calculator does

I am running the following script and getting a different result than expected. My desktop calculator calculates $28.84, but the code shows $29.07. I’m not sure if there’s something wrong with my code.

// Compute Semi-monthly
function calcSalaryS() {
  var sppp3_element = document.getElementById('txt_sppp3');
  var sppp3 = parseInt(sppp3_element.value);
  var hours3_element = document.getElementById('txt_hours3');
  var hours3 = parseInt(hours3_element.value);
  var wwpy3_element = document.getElementById('txt_wwpy3');
  var wwpy3 = parseInt(wwpy3_element.value);
  var calculateS = sppp3 / wwpy3;
  var calculateSS = calculateS / hours3;
  var calculateS1 = sppp3 / 260;
  if (hours3 == 86.67) {
    document.getElementById('resultsS').innerHTML = 'Daily Rate $' + calculateSS.toLocaleString() + '<br>' + 'Hourly Rate $' + calculateS1.toLocaleString();
    event.preventDefault();
    console.log;
  } else {
    document.getElementById('resultsS').innerHTML = 'Daily Rate $' + calculateSS.toLocaleString() + '<br>' + 'Hourly Rate $' + calculateS1.toLocaleString();
    event.preventDefault();
    console.log;
  }
}
<p>Yearly Salary:<input type="text" name="sppp3" id="txt_sppp3" value="60000" size="12" title="Whole numbers only,e.g. '20000'" /></p>
<p>Hours Per Week:<input type="text" name="hours3" id="txt_hours3" value="86.67" size="10" disabled /></p>
<p>Work Week per Year:<input type="text" name="wwpy3" id="txt_wwpy3" value="24" size="7" disabled /></p>
<button value="calculate" onclick="calcSalaryS()" class="block">Compute Daily and Hourly Rate</button></p>
<p id="resultsS"></p>
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    As advised by sir @blakkwater to use Float instead of Int on the hours variable. This worked. Thanks so much to everyone.

    // Compute Semi-monthly
function calcSalaryS() {
  var sppp3_element = document.getElementById('txt_sppp3');
  var sppp3 = parseInt(sppp3_element.value);
  var hours3_element = document.getElementById('txt_hours3');
  var hours3 = parseFloat(hours3_element.value);
  var wwpy3_element = document.getElementById('txt_wwpy3');
  var wwpy3 = parseInt(wwpy3_element.value);
  var calculateS = sppp3 / wwpy3;
  var calculateSS = calculateS / hours3;
  var calculateS1 = sppp3 / 260;
  if (hours3 == 86.67) {
    document.getElementById('resultsS').innerHTML = 'Hourly Rate $' + calculateSS.toLocaleString() + '<br>' + 'Daily Rate $' + calculateS1.toLocaleString();
    event.preventDefault();
    console.log;
  } else {
    document.getElementById('resultsS').innerHTML = 'Hourly Rate $' + calculateSS.toLocaleString() + '<br>' + 'Daily Rate $' + calculateS1.toLocaleString();
    event.preventDefault();
    console.log;
  }
}
    <p>Yearly Salary:<input type="text" name="sppp3" id="txt_sppp3" value="60000" size="12" title="Whole numbers only,e.g. '20000'" /></p>
<p>Hours Per Week:<input type="text" name="hours3" id="txt_hours3" value="86.67" size="10" disabled /></p>
<p>Work Week per Year:<input type="text" name="wwpy3" id="txt_wwpy3" value="24" size="7" disabled /></p>
<button value="calculate" onclick="calcSalaryS()" class="block">Compute Daily and Hourly Rate</button></p>
<p id="resultsS"></p>


  2. 0

    what you expect as result with the line

    var hours3 = parseInt(hours3_element.value);

    and as value "86.87" ?

    The result is: hours3 = 86 !

    You should use parseFloat() !

    Login or Signup to reply.
  3. 0

    Based on your comment you want to yield $28.84 not $29.07 and to do that you can use parseFloat instead of pasrseInt

    Login or Signup to reply.
  4. 0

    I don’t think the other existing answers thoroughly explain the root issue of your code. Here’s why it isn’t working (in addition to the solution):

    The problem is that your computer’s calculator knows what fractions are, but your code doesn’t. Throughout your code, you use parseInt, however, this function only works with integers (whole numbers). If you pass a fraction to parseInt, it will truncate the fraction, or get rid of the fractional part. Because you’re getting rid of data, you’re going to get an inaccurate result.

    What your want to use is parseFloat. parseFloat does the same as parseInt, except it doesn’t truncate anything. If you pass it a fraction, then its result will be fractional. This is what I mean by "parseFloat knows about fractions, but parseInt doesn’t".

    Some other comments/answers say that parseInt returns an integer and parseFloat returns a floating-point number, however, this isn’t entirely true. Unlike other programming languages, there aren’t different types of numbers like int, double, or float in JavaScript; all numbers are floating-point numbers (float), and both parseInt and parseFloat return floating-point numbers. The only difference is how they parse the input. parseFloat will take into consideration the fractional parts and parseInt won’t.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search