js中读取html标签input type=number的值并赋值给变量money,console.log(money)的结果为NaN,console.log(typeof money)的结果为number,如何使console.log(money)的值为数字
时间: 2024-02-09 15:10:31 浏览: 59
如果 `console.log(typeof money)` 的结果为 `number`,说明变量 `money` 已经被成功定义为数字类型的变量。但是,如果 `console.log(money)` 的结果为 `NaN`,说明从 `input` 标签读取的值无法被解析为数字。
出现此问题的原因可能是输入的值不符合 `number` 类型的格式,或者输入的值超出了 `number` 类型的数值范围。为了解决该问题,可以使用以下方法:
1. 根据 `input` 标签的 `min` 和 `max` 属性,限制输入的值在指定的范围内。例如:
```html
<input type="number" id="myInput" min="0" max="100">
<button onclick="myFunction()">点击</button>
<script>
function myFunction() {
var inputVal = document.getElementById("myInput").value;
var money = parseFloat(inputVal);
if (isNaN(money)) {
console.log("输入的值不是一个有效的数字");
} else {
console.log(money);
}
}
</script>
```
在该代码中,`input` 标签的 `min` 和 `max` 属性分别设置为 `0` 和 `100`,即限制输入的值在 0 到 100 之间。
2. 使用正则表达式验证输入的值是否符合 `number` 类型的格式。例如:
```html
<input type="number" id="myInput">
<button onclick="myFunction()">点击</button>
<script>
function myFunction() {
var inputVal = document.getElementById("myInput").value;
var pattern = /^-?(0|[1-9]\d*)(\.\d+)?$/;
if (!pattern.test(inputVal)) {
console.log("输入的值不是一个有效的数字");
} else {
var money = parseFloat(inputVal);
console.log(money);
}
}
</script>
```
在该代码中,使用正则表达式 `/^-?(0|[1-9]\d*)(\.\d+)?$/` 验证输入的值是否符合 `number` 类型的格式,如果不符合,则输出错误提示;否则,将输入的值转换为浮点数类型的值,并输出该值。
通过上述方法,可以避免将无法解析为数字的字符串类型的值赋值给数字类型的变量,从而使 `console.log(money)` 的结果为数字。
阅读全文