用于计算的JavaScript函数不起作用？

Question

this is my html input field

<input type="number" id="t1">
<br /> 
<button type="button" onclick="getvalue()">calculate</button>
<br />
<div id="l1">change<div>

this is my script

<script>
function getvalue() {
  var l = document.getElementById('l1');
  var c = document.getElementById('t1').value;
  var lc = c + 200;
  var tax =  2.1;
  var tot = lc * tax;
  l.innerHTML=tot;
}
</script>

and in text box i enter 10 so result is 441 this is the calculation 10+200 = 210 then 210*2.1 = 441

but in text box i enter 10 and click button i got 21420

the problem is var lc = c + 200; this is not calculate correct here its work 10200

and i try this method also var x = 200; var lc = c + x; this is also i got 10200 how can i fix this?

Answer 1

type of value in input number is string .

 var val = document.getElementById('t1').value ; console.log( typeof val ) ; 

 <input type="number" id="t1"> 

So you must convert to number like this:

var lc = Number(c) + 200 ;
//OR
var lc = parseInt(c) + 200 ;
//OR
var lc = parseFloat(c) + 200 ;

 function getvalue() { var l = document.getElementById('l1'); var c = document.getElementById('t1').value; var lc = Number(c) + 200; var tax = 2.1; var tot = lc * tax; l.innerHTML=tot; } 

 <input type="number" id="t1"> <br /> <button type="button" onclick="getvalue()">calculate</button> <br /> <div id="l1">change <div> 

Answer 2

Even though the type of input is number , actually the value is of type string. That's why string concatenation is happening.

You can check the type of value with typeof operator.

To perform the intended arithmetic operation, you have to convert the value to number.

Please Note: It is better to use textContent instead of innerHTML when dealing with text only content.

var c = Number(document.getElementById('t1').value);

 function getvalue() { var l = document.getElementById('l1'); var c = document.getElementById('t1').value; console.log(typeof(c)); //string var lc = Number(c) + 200; var tax = 2.1; var tot = lc * tax; l.textContent = tot; } 

 <input type="number" id="t1"> <br /> <button type="button" onclick="getvalue()">calculate</button> <br /> <div id="l1">change <div>