0

I would like to auto calculate a price + commission (12%) and automatically input the result. For example: 100$ + 12% commission = 112$. Problem is here my result is 10012.

Where did I write wrong my code:

<input type="value" class="form-control" id="input">
<input type="value" id="output" onkeyup="calc();"/>
<input id="finalprice" onkeyup="calc();"/>
<script>
function calc() {
  var a = document.getElementById("input").value;
  var b = (12/100) ;
  var c = b * 100;
  var e = a + c;
  var f = a + e;
  document.getElementById("output").value = c;
  document.getElementById("finalprice").value = f;
}
</script>
ChinaXiaoHong
  • 139
  • 1
  • 4
  • 19
  • 1
    *"document.getElementById().value not working"* - From your description, actually `.getElementById().value` is working perfectly, but your calculation is going wrong. – nnnnnn Sep 05 '16 at 03:09
  • Since when there's input with type of `value`? Simply change it to `number` and you're all good.. – choz Sep 05 '16 at 03:12
  • @choz - A `type="number"` input's `.value` property will still return a string... – nnnnnn Sep 05 '16 at 03:14
  • @nnnnnn Ah true.. Need to cast it with `Number` or `parseFloat` then.. – choz Sep 05 '16 at 03:16

3 Answers3

6

You are getting 10012 because the values are concatenating together as a string.. You need to parse the values of your inputs to allow calculations to occur. I rewrote the code to simplify it. so entering your amount into the first text input (#input) and the rate into the second (#percentage) will give you the total amount in the third textbox (#finalprice).

function calc() {
  var amount = parseFloat(document.getElementById("input").value);
  var rate = parseFloat(document.getElementById("percentage").value)/100;
  var calculatedValue = amount * rate
  document.getElementById("finalprice").value = amount + calculatedValue;
}
<input type="text" class="form-control" id="input">
<input type="text" id="percentage" onkeyup="calc();"/>
<input type = "text" id="finalprice"/>
gavgrif
  • 15,194
  • 2
  • 25
  • 27
  • 1
    Given that the OP is talking about prices and commissions the inputs could include decimal places, so `parseInt()` probably isn't the best choice. – nnnnnn Sep 05 '16 at 03:11
  • fair point - @nnnnnn - answer amended to be parseFloat – gavgrif Sep 05 '16 at 03:12
  • Didn't see this answer when commenting.. This should be marked as the correct answer.. – choz Sep 05 '16 at 03:17
  • There's no need to parse anything. Given `var a = document.getElementById("input").value;` and `commission` is expressed as an integer (e.g. 12 for 12%), then `commissionAmt` is `a * commission/100` and final price is `a * (1 + commission/100)` even if *a* and *commission* are strings. – RobG Sep 05 '16 at 03:17
  • @RobG True, although for maintainability sake I would still explicitly coerce them into numbers so it is absolutely clear what is going on. Someone might come along and change the code and reintroduce the same kind of implicit coercion bug later. – Useless Code Sep 06 '16 at 04:02
  • @UselessCode—sure, but *parseInt(...)* and *parseFloat(...)* are ugly. ;-) – RobG Sep 06 '16 at 04:23
  • @RobG It's really ugly inline, it's not so bad if you are assigning them to variables before doing the calculations. I usually use the [Unary plus](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus_()) like [Isaac](http://stackoverflow.com/users/1894021/isaac) did in [his answer](http://stackoverflow.com/a/39323384/778975). Much shorter and less cluttering but it still gets the job done :-) – Useless Code Sep 06 '16 at 05:53
2

Try this:

var a = +document.getElementById("input").value;

single + operator JavaScript

Community
  • 1
  • 1
Isaac
  • 11,409
  • 5
  • 33
  • 45
0

Value of a is string , to achieve expected use below option

var a= document.getElementById('input').value;   
a=a*1;// multiplying with 1 makes variable value number
nnnnnn
  • 147,572
  • 30
  • 200
  • 241
Naga Sai A
  • 10,771
  • 1
  • 21
  • 40