Функция JavaScript для расчета не работает? - PullRequest
Новая
       21

Функция JavaScript для расчета не работает?

0 голосов
/ 23 октября 2018

это мое поле ввода 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 как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

type значения в input number равно 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>
0 голосов
/ 23 октября 2018

Даже если тип ввода 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>
...