Question

此代码中有一个小错误，请帮助我。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, 
    maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="text" id="price">
  <button onclick="calc()">GO</button>
  <h1 id="show"></h1>
  <script type="text/javascript">
    function calc() {
      "use strict";
      var price = document.getElementById('price').value;
      var res = (price / 100 * 5 + 20) + price;
      var show = document.getElementById('show').value = Math.floor(res);
    }
  </script>
</body>
</html>

ex：在输入中写入100，结果是10025，我需要125

Answer 1

这是因为您尝试将字符串添加到数字中。您需要将price转换为这样的数字：

var price = parseFloat(document.getElementById('price').value);
// Or like this :
var price = Number(document.getElementById('price').value);
// Or like this :
var price = document.getElementById('price').value * 1;

显示十进制数字的完整示例：

var priceElement = document.getElementById('price');
var showElement = document.getElementById('show');

function calc() {
  var price = parseFloat(priceElement.value, 10);
  var result = (price / 100 * 5 + 20) + price;
  showElement.innerHTML = result.toFixed(2);
}

<input type="text" id="price">
<button onclick="calc()">GO</button>
<h1 id="show"></h1>

Answer 2

很不错。

一些修复：

将元素存储在函数之外，因为它们的id在您的情况下不会更改：

var priceElement = document.getElementById('price');
var showElement = document.getElementById('show');

使用parseFloat(...)解析存储在字符串中的浮点数：

var price = parseFloat(priceElement.value);

要设置元素的内容（在您的情况下为h1元素的内容），请使用.innerHTML：

showElement.innerHTML = Math.floor(result);

var priceElement = document.getElementById('price');
var showElement = document.getElementById('show');

function calc() {
  var price = parseFloat(priceElement.value);
  var result = (price / 100 * 5 + 20) + price;
  showElement.innerHTML = Math.floor(result);
}

<input type="text" id="price">
<button onclick="calc()">GO</button>
<h1 id="show"></h1>

Answer 3

是的，price的值是字符串，所以将其转换为数字。
而且我认为您的“ document.getElementById（'show'）。value”没有用。
并且不使用变量show。
res的公式有些复杂-请参阅var v1。
也许您会发现使用console.log在调试中很有用。

<html>
<body>
<input type="text" id="price">
<button onclick="calc()">GO</button>
<h1 id="show"></h1>
<script type="text/javascript">
  "use strict";
function calc() {
  var price = 1*document.getElementById('price').value;
  console.log("price", price);
  var res = (price / 100 * 5 + 20) + price;
  console.log("res", res);
  document.getElementById('show').innerHTML = Math.floor(res);
  var v1 = price*1.05 + 20;
  console.log("v1", v1);
  document.getElementById('show').innerHTML += ", " + v1;
}
</script>
</body>
</html>

JavaScript计算器输入了错误的数字

3 个答案:

很不错。