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

Question

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

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

我简化了下面的代码以突出显示该问题。

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

感谢任何关于此的指导

Answer 1

您正在使用二元运算符（在内部）将值转换为 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>

Answer 2

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

此外，您应该使用 .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>

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

Loss of Decimal Value when taking number from form input

javascript

html

html-input