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

-1
user8305604 23 Окт 2018 в 10:04

2 ответа

Лучший ответ

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>
5
halfer 10 Ноя 2018 в 21:05

Несмотря на то, что тип ввода - number, на самом деле значение имеет строковый тип. Вот почему происходит конкатенация строк.

Вы можете проверить тип значения с помощью {{X0} } оператор.

Чтобы выполнить предполагаемую арифметическую операцию, вы должны преобразовать значение в число.

Обратите внимание: лучше использовать 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>
1
Mamun 23 Окт 2018 в 09:09
52943027