在事件侦听器中使用typeof
在事件侦听器中使用typeof
提问于 2018-07-20 03:40:19
如果我输入的值是一个数字，我想控制日志信息。不幸的是，它不能工作，任何bug也不会出现。
从CodePen链接(https://codepen.io/matoung/pen/KBNmPP)中提取的以下代码片段
let button = document.querySelector('.buttonClass');
button.addEventListener('click', function() {
let myValue = document.querySelector('.inputClass').value;
if(typeof myValue === 'number'){
console.log('To jest liczba');
}
});.wrapper {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.container-6 {
border: 1px solid #000;
align-items: center;
padding: 40px;
margin-top: 100px;
}<html>
<head>
<title>Random</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<input type="text" class='inputClass' />
<input type="button" value="Wyślij" class="buttonClass"/>
<div class="wrapper">
<div class="container-6">
<p>It will be a number</p>
</div>
<div class="container-6">
<p>It will be a string</p>
</div>
<div class="container-6">
<p>It will be a boolean</p>
</div>
<div class="container-6">
<p>It will be an array</p>
</div>
<div class="container-6">
<p>It will be an undefined</p>
</div>
<div class="container-6">
<p>It will be a null</p>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
回答 3
Stack Overflow用户
发布于 2018-07-20 03:53:49
您可以使用isNaN检查数字
let button = document.querySelector('.buttonClass');
button.addEventListener('click', function() {
let myValue = document.querySelector('.inputClass').value;
if(!Number.isNaN(parseInt(myValue))){
console.log('To jest liczba');
}
});.wrapper {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.container-6 {
border: 1px solid #000;
align-items: center;
padding: 40px;
margin-top: 100px;
}<html>
<head>
<title>Random</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<input type="text" class='inputClass' />
<input type="button" value="Wyślij" class="buttonClass"/>
<div class="wrapper">
<div class="container-6">
<p>It will be a number</p>
</div>
<div class="container-6">
<p>It will be a string</p>
</div>
<div class="container-6">
<p>It will be a boolean</p>
</div>
<div class="container-6">
<p>It will be an array</p>
</div>
<div class="container-6">
<p>It will be an undefined</p>
</div>
<div class="container-6">
<p>It will be a null</p>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Stack Overflow用户
发布于 2018-07-20 04:08:23
Hari已经给出了一个完全正确的答案。但是，如果您希望能够检测到的不仅仅是number类型，您可以像这样使用JSON.parse：
button.addEventListener('click', function() {
let myValue = document.querySelector('.inputClass').value;
try {
myValue = JSON.parse(myValue);
} catch (parseError) {
// myValue does not hold a valid JSON string, so it must be any arbitrary string.
// You can choose to define what constitutes as 'undefined' here.
}
if (typeof myValue === 'number'){
console.log('To jest liczba');
} else if (typeof myValue === 'boolean') {
console.log('This is a boolean');
} // etc.
});Stack Overflow用户
发布于 2018-07-20 04:26:06
我会将unary plus operator与parseFloat和isNaN一起使用。
类似于：
let number = +myValue;
if (number === parseFloat(myValue) && !isNaN(number)) {
// is a number, then you can use `number` if you neeed it
}代码之所以使用所有这三种方法，是为了涵盖任何场景：
parseFloat最多可转换为第一个非数字字符:这意味着将12.10px解析为有效的12.10，其中+"12.10px"返回NaN.- the一元运算符将空字符串"“转换为0，其中
parseFloat返回NaN-在我们的示例中这是正确的。 - 如果它们都返回
NaN，则我们必须调用isNaN才不会产生错误结果。<代码>H219<代码>G220
这应该涵盖了几乎所有的场景。但是，请记住，与"0.0314E+2"一样，在JS中，像"0x10"这样的字符串是一个有效的数字(16，十六进制)。如果你只想拥有00.0形式的正则浮点数，那么你需要一个正则表达式。类似于：
if (/^\d*\.?\d+$/.test(myValue)) {
// is a number, then you can convert with the unary operator
let number = +myValue;
}如果你只想要整数，那么正则表达式更简单，它就是/^\d+$/。
希望它能帮上忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51430605
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号