JavaScript计算器写错了数字_Javascript_Html_Calculator

JavaScript计算器写错了数字

javascript html

JavaScript计算器写错了数字,javascript,html,calculator,Javascript,Html,Calculator,我在这段代码中有一个小错误，请帮助我 <!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">

我在这段代码中有一个小错误，请帮助我

<!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>


文件
去
函数计算（）{
“严格使用”；
var price=document.getElementById（'price'）.value；
var res=（价格/100*5+20）+价格；
var show=document.getElementById（'show'）。value=Math.floor（res）；
}

例如：在输入中写入100结果是10025，我需要125，因为您试图将字符串添加到数字中。您需要将

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'）；
函数计算（）{
var price=parseFloat（priceElement.value，10）；
var结果=（价格/100*5+20）+价格；
showElement.innerHTML=result.toFixed（2）；
}

去

完全正确。

一些修复：

将元素存储在函数之外，因为它们的

id

s在您的情况下不会更改：

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

用于分析存储在字符串中的浮点数：

var price = parseFloat(priceElement.value);

要设置元素的内容（在您的示例中为

h1

元素的内容），请使用：

var priceElement=document.getElementById（'price'）；
var showElement=document.getElementById（'show'）；
函数计算（）{
var price=parseFloat（priceElement.value）；
var结果=（价格/100*5+20）+价格；
showElement.innerHTML=Math.floor（结果）；
}

去

是的，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>


去
“严格使用”；
函数计算（）{
var price=1*document.getElementById（'price'）.value；
控制台日志（“价格”，价格）；
var res=（价格/100*5+20）+价格；
控制台日志（“res”，res）；
document.getElementById（'show'）.innerHTML=Math.floor（res）；
var v1=价格*1.05+20；
console.log（“v1”，v1）；
document.getElementById（'show'）.innerHTML+=“，”+v1；
}

price的值是字符串使用parseFloat函数

<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>