从表单输入中获取数字时丢失十进制值答案

【问题标题】：Loss of Decimal Value when taking number from form input从表单输入中获取数字时丢失十进制值
【发布时间】：2020-11-10 02:53:21
【问题描述】：

我正在尝试从 HTML 表单输入中获取一个值（最多 2 位小数），然后我计划将该值用于 JavaScript 中的一些计算。

我遇到的问题是当用户输入一个值时，小数位会丢失。

我已经简化了下面的代码来突出这个问题。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form>
    1st Number<br> <input type="number" step="0.01" id="num1" placeholder=0.00>
  </form>

  <button onclick="calculator()">submit</button>

  <p id="answer"></p>
</body>

<script>
        function calculator(){
            const num1 = document.getElementById("num1").value|0;
            document.getElementById("answer").innerHTML = num1; 
//example user inputs 5.55, the returned value = 5
        }
</script>
</html>

感谢您对此的任何指导

【问题讨论】：

标签： javascript html html-input

【解决方案1】：

您没有为逻辑 OR 使用正确的运算符，即 ||（逻辑）而不是 |（按位）。

此外，您应该使用.textContent 而不是.innerHTML 将值设置到另一个元素中，因为检索到的值不包含任何HTML。 .innerHTML 具有安全性和性能影响。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form>
    1st Number<br> <input type="number" step="0.01" id="num1" placeholder=0.00>
  </form>

  <button onclick="calculator()">submit</button>

  <p id="answer"></p>
</body>

<script>
        function calculator(){
            const num1 = document.getElementById("num1").value || 0;
            document.getElementById("answer").textContent = num1; 
        }
</script>
</html>

【讨论】：

【解决方案2】：

您正在使用二元运算符（内部）将值转换为 int。

您应该改为parseFloat 或使用+ 运算符将其转换为Number

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form>
    1st Number<br> <input type="number" step="0.01" id="num1" placeholder=0.00>
  </form>

  <button onclick="calculator()">submit</button>

  <p id="answer"></p>
</body>

<script>
        function calculator(){
            const num1 = parseFloat(document.getElementById("num1").value);
            document.getElementById("answer").innerHTML = num1; 
//example user inputs 5.55, the returned value = 5
        }
</script>
</html>

【讨论】：

JavaScript 没有int。所有数值数据均为numbers。
这就是我在内部编写的原因，因为它实际上是在您使用位运算符时强制转换的。 medium.com/@zandaqo/…
然后将其转换为存储为 64 位浮点数（双精度）的数字