Функция 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, как я могу это исправить?

javascript calculation

-1

user8305604 23 Окт 2018 в 10:04

Answer 1

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

Answer 2

Несмотря на то, что тип ввода - 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

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

2 ответа

Похожие вопросы

Новые вопросы

javascript