用於計算的JavaScript函數不起作用？

Question

這是我的html輸入字段

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

這是我的劇本

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

並在文本框中輸入10，因此結果為441，這是計算10 + 200 = 210然后210 * 2.1 = 441

但在文本框中，我輸入10並單擊按鈕，我得到21420

問題是var lc = c + 200; 這不是正確的計算方法，其工作10200

我也嘗試這種方法var x = 200; var lc = c + x; 這也是我10200我該如何解決？

Answer 1

input number中值的type為string 。

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

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

因此，您必須像這樣轉換為數字：

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

即使輸入的類型是number ，但實際上值的類型還是string。 這就是字符串串聯發生的原因。

您可以使用typeof運算符檢查值的類型。

要執行預期的算術運算，您必須將值轉換為數字。

請注意：處理純文本內容時，最好使用textContent而不是innerHTML 。

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>