时间戳

首页 > 解决方案 > 为什么 document.getElementById().value 会返回一个字符串，即使它的类型是数字？

javascript - 为什么 document.getElementById().value 会返回一个字符串，即使它的类型是数字？

问题描述

我正在尝试制作一个小费计算器，并且总变量返回一个字符串，因为 typeof bill 是一个字符串，为什么会这样，即使文本输入框类型是number？

输出（“输入的账单为 1000，人数为 1）：- 字符串
150
150
1000150 

document.querySelector('#persons').addEventListener('change', (findresult));
document.querySelector('#bill').addEventListener('change', (findresult));
document.querySelector('#percent').addEventListener('change', (findresult));

function findresult() {
  var persons = document.getElementById('persons').value;
  var bill = document.getElementById('bill').value;
  var percent = document.getElementById('percent').value;
  // console.log(persons);
  console.log(typeof bill);
  // console.log(percent);
  var tip = (bill * percent) / 100;
  var tip_person = tip / persons;
  var total = bill + tip;
  console.log(tip);
  console.log(tip_person);
  console.log(total);
}
<div class="container">
  <h1>Tip calcuator</h1><br>
  <div class="inputs">
    <input type="number" class="inputfield" id="persons" placeholder="No of Persons"><br><br>
    <input type="number" class="inputfield" id="bill" placeholder="Bill"><br><br>
    <input type="number" class="inputfield" id="percent" placeholder="Tip%">
  </div>
  <br>
  <div class="result">
    <br>
    <p>Tip Per Person :</p>
    <p>TOTAL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</p>
  </div>
</div>

标签： javascripthtml

解决方案

用parseFloat包围bill, percent声明值，以便在将字符串转换为数字时允许小数。value

var bill = parseFloat(document.getElementById('bill').value);
var percent = parseFloat(document.getElementById('percent').value);

您可以使用该step属性在数字输入中允许小数，并将其设置为0.01。这将影响使用输入上的向上、向下按钮时创建的值。

<input type="number" class="inputfield" id="bill" placeholder="Bill" step="0.01" >


document.querySelector('#persons').addEventListener('change', (findresult));
document.querySelector('#bill').addEventListener('change', (findresult));
document.querySelector('#percent').addEventListener('change', (findresult));

function findresult() {
  var persons = document.getElementById('persons').value;
  // Use parseFloat to allow for decimals
  var bill = parseFloat(document.getElementById('bill').value);
  var percent = parseFloat(document.getElementById('percent').value);
  // console.log(persons);
  console.log(typeof bill);
  // console.log(percent);
  var tip = (bill * percent) / 100;
  var tip_person = tip / persons;
  var total = bill + tip;
  console.log(tip);
  console.log(tip_person);
  console.log(total);
}
<div class="container">
  <h1>Tip calcuator</h1><br>
  <div class="inputs">
    <input type="number" class="inputfield" id="persons" placeholder="No of Persons"><br><br>
    <!-- Allow cents to be allowed via the `step` attribute -->
    <input type="number" class="inputfield" id="bill" placeholder="Bill" step="0.01" ><br><br>
    <input type="number" class="inputfield" id="percent" placeholder="Tip%">
  </div>
  <br>
  <div class="result">
    <br>
    <p>Tip Per Person :</p>
    <p>TOTAL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</p>
  </div>
</div>

推荐阅读