我正在尝试从 HTML 表单输入中获取一个值（最多 2 位小数），然后我计划将该值用于 JavaScript 中的某些计算。我遇到的问题是当用户输入一个值时，小数位会丢失。我简化了下面的代码以突出显示该问题。<!DOCTYPE html><html><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>
2 回答
繁星点点滴滴
TA贡献1803条经验 获得超3个赞
您没有为逻辑或使用正确的运算符，这是||（逻辑）不是|（按位）。
此外，您应该使用.textContentinstead of.innerHTML将值设置到另一个元素中，因为检索到的值不包含任何 HTML。.innerHTML具有安全和性能影响。
<!DOCTYPE html>
<html>
<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>
森林海
TA贡献2011条经验 获得超2个赞
您正在使用二元运算符将值转换为 int（内部）。
您应该改为parseFloat或使用+运算符将其转换为Number
<!DOCTYPE html>
<html>
<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>
添加回答
举报
0/150
提交
取消