检查输入的值是否实际上是数字.如果不是，您将在部门下看到错误消息 [英] Check whether the entered value is actually a number. If not, you will see an error message under the division
本文介绍了检查输入的值是否实际上是数字.如果不是，您将在部门下看到错误消息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在jquery中创建一个带有两个文本框，一个按钮和一个带有伪文本的div的网页.单击按钮后，将使用在文本框中输入的值来设置div的高度和宽度.使用parseInt函数将提交的值设为数字.然后检查输入的值是否实际上是数字.如果不是，您将在部门下看到错误消息. 我的问题是，在这种情况下，如何使用函数parseInt和isNaN并得到错误消息? 感谢您的任何建议或帮助:-)
I want to create in jquery a web page with two text boxes, a button and a div with dummy text. After clicking the button, the height and width of the div is set with the values entered in text boxes. Make a submitted values a number using the parseInt function. Then check whether the entered value is actually a number. If not, you will see an error message under the division. My question is, how can i use function parseInt and also function isNaN in this case and get error message ? Thanks for any advice or help :-)
<!DOCTYPE HTML>
<html>
<head>
<!-- Character Encoding -->
<meta charset="utf-8">
<!--Descriptive Title-->
<title>Les 9-4</title>
<!-- CSS style -->
<style>
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
}
.blauw {
color: #06F;
}
#divResult {
width: 600px;
height: 350px;
border: 2px solid #D3D3D3;
margin: 10px 0;
}
#txtColor {
width: 200px;
}
</style>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- jquery -->
<script>
$(document).ready(function () {
$('#btnKnop').on('click', function () {
var waarde1 = $('#Hoogte').val();
var waarde2 = $('#Breedte').val();
$('#divResult').css('height', waarde1 + 'px').css('width', waarde2 + 'px');
$('#Hoogte').on('click', function () {
$(this).val('');
$('#Breedte').on('click', function () {
$(this).val('');
})
});
});
});
</script>
</head>
<!-- Body Section -->
<body>
<input type="text" id="Hoogte" placeholder="Hoogte...">
<input type="text" id="Breedte" placeholder="Breedte...">
<button id="btnKnop">OK</button>
<div id="divResult"> Height and width of the div is set with the values entered in text boxes. Make a submitted values a number using the parseInt function. Then check whether the entered value is actually a number. If not, you will see an error message under the division... </div>
</body>
</html>
推荐答案
尝试一下:
<!DOCTYPE HTML>
<html>
<head>
<!-- Character Encoding -->
<meta charset="utf-8">
<!--Descriptive Title-->
<title>Les 9-4</title>
<!-- CSS style -->
<style>
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
}
.blauw {
color: #06F;
}
#divResult {
width: 600px;
height: 350px;
border: 2px solid #D3D3D3;
margin: 10px 0;
}
#errorMessage {
color: red;
}
#txtColor {
width: 200px;
}
</style>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- jquery -->
<script>
$(document).ready(function () {
$('#btnKnop').on('click', function () {
var waarde1 = $('#Hoogte').val();
var waarde2 = $('#Breedte').val();
if(isNaN(parseInt(waarde1)) || isNaN(parseInt(waarde2))){
$('#errorMessage').text(`Error ${isNaN(parseInt(waarde1)) ? 'waarde1 isNaN ' : ''} ${isNaN(parseInt(waarde2)) ? 'waarde2 isNaN ' : ''}`);
} else {
$('#errorMessage').text('');
}
/* Alternative
if(isNaN(+waarde1) || isNaN(+waarde2)){
$('#errorMessage').text(`Error ${isNaN(+waarde1) ? 'waarde1 isNaN ' : ''} ${isNaN(+waarde2) ? 'waarde2 isNaN ' : ''}`);
} else {
$('#errorMessage').text('');
}
*/
$('#divResult').css('height', waarde1 + 'px').css('width', waarde2 + 'px');
$('#Hoogte').on('click', function () {
$(this).val('');
$('#Breedte').on('click', function () {
$(this).val('');
})
});
});
});
</script>
</head>
<!-- Body Section -->
<body>
<input type="text" id="Hoogte" placeholder="Hoogte...">
<input type="text" id="Breedte" placeholder="Breedte...">
<button id="btnKnop">OK</button>
<p id="errorMessage"></p>
<div id="divResult"> Height and width of the div is set with the values entered in text boxes. Make a submitted values a number using the parseInt function. Then check whether the entered value is actually a number. If not, you will see an error message under the division... </div>
</body>
</html>
这篇关于检查输入的值是否实际上是数字.如果不是，您将在部门下看到错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
