从表单输入中获取数字时丢失十进制值
Loss of Decimal Value when taking number from form input
我正在尝试从 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>
感谢任何关于此的指导
您正在使用二元运算符(在内部)将值转换为 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>
您没有为逻辑或使用正确的运算符,它是 ||
(逻辑)而不是 |
(按位)。
此外,您应该使用 .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>
我正在尝试从 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>
感谢任何关于此的指导
您正在使用二元运算符(在内部)将值转换为 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>
您没有为逻辑或使用正确的运算符,它是 ||
(逻辑)而不是 |
(按位)。
此外,您应该使用 .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>