当从javascript访问时,HTML输入类型="数字"仍然返回一个字符串
Sai*_*S.R 23 html javascript numbers input web
我是javascript的新手,我正在尝试学习JS中的函数等,并尝试添加2个数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS ADD</title>
</head>
<body>
<h1>Funcitons is JS</h1>
<input type="number" id="num1">
<input type="number" id="num2">
<button type="button" onclick="addNumAction()">
Add
</button>
<script>
function addNum(n1, n2) {
return parseInt(n1) + parseInt(n2);
}
function addNumAction() {
var n1 = document.getElementById("num1").value;
var n2 = document.getElementById("num2").value;
var sum = addNum(n1, n2);
window.alert("" + sum);
}
</script>
</body>
</html>如果我删除parseInt(),该值只被视为字符串,那么使用的是<input type="number">什么？请向我解释.用什么字段来输入数字？
Arn*_*eau 27
你得到一个字符串是正常的.
数字类型的目的是移动浏览器使用它来显示正确的键盘,而某些浏览器使用它来进行验证.例如,该email类型将显示带有@和'.'的键盘.在键盘上,number将显示一个数字键盘.
- `<input type="number">` 和其他一些类型的目的也是为了在 `valueAsNumber` 属性中提供有用的值。 (3认同)
- 在这种情况下，您将必须使用parseInt。 (2认同)
Álv*_*lez 13
HTML和HTTP都没有真正具有数据类型的概念(可能因为它们不是开头的编程语言)而且一切都是字符串.当您使用其他语言来获取该信息时,您有时可能会获得一些神奇的功能(例如,PHP将从GET/POST字段生成数组,其名称上包含成对的方括号)但这是其他语言的一个特性.
在这种情况下,.value属于DOM API,这样的API确实有类型.但是让我们看看它是如何定义的.所述<input>标签由表示HTMLInputElement界面和value属性是类型DOMString:
DOMString是一个UTF-16字符串.由于JavaScript已经使用了这样的字符串,因此DOMString直接映射到String.
换句话说,type="number"是提示实现客户端验证和适当的GUI控件,但底层元素仍将存储字符串.
您可以使用valueAsNumber（在该页面上描述）来获取实际数值。所以你的代码将是：
function addNum(n1, n2) {
return n1 + n2;
}
function addNumAction() {
var n1 = document.getElementById("num1").valueAsNumber;
var n2 = document.getElementById("num2").valueAsNumber;
var sum = addNum(n1, n2);
window.alert("" + sum);
}
使用valueAsNumber
非数字仍然可以输入。确保检查有效性并处理错误。
const value = myInput.valueAsNumber
if (isNaN(value)) return // or other handling
如果您需要每次更改的更新：
myInput.addEventListener("change", () => {
const newValue = myInput.valueAsNumber
if (isNan(newValue)) return
// Handle change
})