Wrong output when using a function

Question

I have a function that calculates the price something. When the age < 5 then price = 0, when the age < 15 the price = price/2 and when age > 15 the price = price + price*0.15. The first 2 are working fine but the last one has a problem. When for example a put 100 on the price input and 26 on the age input the answer that it gives me is 10015.

<script>
  function add(x, y) {
    return x+y;
  }
  function Subtract(x, y) {
    return x-y;
  }
  function Divide(x, y) {
    return x/y;
  }
  function Multiply(x, y) {
    return x*y;
  }
  var plusPrice = (function () {
    var counter = 0;
    return function () {return counter += 1;}
  })();
  var plusButton = (function () {
    var counter = 0;
    return function () {return counter += 1;}
  })();
  function updateClickCount() {
    document.getElementById("clicks").innerHTML = plusButton();
    if (document.getElementById("price").value !== '') {
      document.getElementById("input").innerHTML = plusPrice();
    }
  }
  function checkInputs() {
    var price = document.getElementById("price").value;
    var age = document.getElementById("age").value;
    if( parseInt(price) < 0  ||  isNaN(parseInt(price))) {
      window.alert("Please insert a valid price");
      price = '';
    }
    if(parseInt(age) > 100 || parseInt(age) < 0 ||  isNaN(parseInt(age))){
      window.alert("Please insert a valid age");
      age = '';
    }
  }
  function Calculate() {
    var price = document.getElementById("price").value;
    var age = document.getElementById("age").value;
    if (document.getElementById("price").value !== '' && document.getElementById("age").value !== '') {
      if (age<5) {
        document.getElementById("demo").innerHTML = Subtract(price,price);
      } else if (age < 15 && age >= 5) {
        document.getElementById("demo").innerHTML = Divide(price,2);
      } else {
        document.getElementById("demo").innerHTML = add(price,Multiply(price,0.15));
      }
    } else {
      window.alert("Please fill both age and price to calculate the amount you have to pay");
    }
  }

</script>

<body>
    Please enter the price: <br>
    <input type="text" id="price"><button onclick="document.getElementById('price').value = ''">Clear input field</button><br><br>
    Please enter your age: <br>
    <input type="text" id="age"><button onclick="document.getElementById('age').value = ''">Clear input field</button><br><br>
    <button onclick="checkInputs(); updateClickCount(); Calculate();">Calculate price</button>
    <p id="totalPrice">The total amount you have to pay is: </p><br>
    <p id="demo"></p>
    <p>Button Clicks: <a id="clicks">0</a></p>
    <p>Correct Price Fill Count: <span id="input">0</span></p>
  </body>

you have to convert price / age to integers to work properly. Eg use parseInt() before using price or age in calculate routine — Nikos M.
– Nikos M., Commented Apr 4, 2019 at 9:59

mbojko · Accepted Answer · 2019-04-04 10:02:21Z

5

Apparently, price is a string. Replace

    var price = document.getElementById("price").value;

with

    var price = parseFloat(document.getElementById("price").value);

The function has already worked for subtraction and division, because operators - and / can't be applied to strings, so JS coerces them to numbers. The +, however, has a string-compatible interpretation (string concatenation), so type coercion doesn't happen.

edited Apr 4, 2019 at 10:02

answered Apr 4, 2019 at 9:59

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vkatsou Over a year ago

Thank you very much. That's the case!

Pranav Ramachandran · Accepted Answer · 2019-04-04 10:02:13Z

0

or do this
var price = Number(document.getElementById("price").value);

answered Apr 4, 2019 at 10:02

Pranav Ramachandran

4973 silver badges10 bronze badges

Comments

Bhuvana Basanth · Accepted Answer · 2019-04-04 10:12:15Z

0

In JavaScript the + symbol can be used both for numeric addition and string concatenation, depending on the variables either side. For example,

console.log('value:' + 4);           // 'value:4'
console.log(3 + 1);                   // 4
console.log('value:' + 4 + '+' + 1); // 'value:4+1'
console.log('value:' + 4 + 1);       // 'value:41'
console.log('value:' + (3 + 1));     // 'value:4'
console.log(4 + ' is the value');    // '4 is the value

Hence convert your operands to numeric type before proceeding with addition so that they are not concatenated.

Hope this clarifies.

answered Apr 4, 2019 at 10:12

Bhuvana Basanth

393 bronze badges

Collectives™ on Stack Overflow

Wrong output when using a function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related