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>
4
  • 1
    "document.getElementById().value not working" - From your description, actually .getElementById().value is working perfectly, but your calculation is going wrong.
    – nnnnnn
    Commented Sep 5, 2016 at 3:09
  • Since when there's input with type of value? Simply change it to number and you're all good..
    – choz
    Commented Sep 5, 2016 at 3:12
  • @choz - A type="number" input's .value property will still return a string...
    – nnnnnn
    Commented Sep 5, 2016 at 3:14
  • @nnnnnn Ah true.. Need to cast it with Number or parseFloat then..
    – choz
    Commented Sep 5, 2016 at 3:16

3 Answers 3

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"/>

7
  • 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
    Commented Sep 5, 2016 at 3:11
  • fair point - @nnnnnn - answer amended to be parseFloat
    – gavgrif
    Commented Sep 5, 2016 at 3:12
  • Didn't see this answer when commenting.. This should be marked as the correct answer..
    – choz
    Commented Sep 5, 2016 at 3: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
    Commented Sep 5, 2016 at 3: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. Commented Sep 6, 2016 at 4:02
2

Try this:

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

single + operator JavaScript

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.