单击时，如果输入类型文本中的值大于10，则执行此操作

Question

如果用户在此输入中输入的值超过10，我将尝试向用户显示一条消息。

这是输入字段；计算"；按钮：

<div class="form__field">
<label for="sd-property-value" class="form__label">Property Value: </label>
<input type="text" id="sd-property-value" class="sd-property-value currency input-text" name="sd-calc" />
</div>
<div class="calculator-controls">
<p><button id="sd-Calculate" class="button">Calculate</button></p>
</div>

这是jquery：

$('#sd-Calculate').on('click', function () {
var checkInput = parseInt($('#sd-property-value').val());
console.log('new clicker');
console.log(checkInput);
if (checkInput > 50) {
console.log('more than');
} else {
console.log("less than");
}
});

控制台日志不断返回NaN。

我该怎么解决这个问题？

Answer 1

我添加了div，如果值大于10或值小于10，它将向用户显示消息。

运行下面的代码段。

$('#sd-Calculate').on('click', function() {
var checkInput = parseInt($('#sd-property-value').val());
if (checkInput <= 10) {
$('#message').text('You must enter more then 10')
} else if (checkInput > 10) {
$('#message').text('You value is more then 10')
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form__field">
<label for="sd-property-value" class="form__label">Property Value: </label>
<input type="text" id="sd-property-value" class="sd-property-value currency input-text" name="sd-calc" />
</div>
<div class="calculator-controls">
<p><button id="sd-Calculate" class="button">Calculate</button></p>
</div>
<div id="message"></div>

Answer 2

代替parseInt，你能试试下面的吗

var checkInput = +($('#sd-property-value').val());

如果值为空，则返回零。但如果用户在输入字段中键入字符串，它将是NaN。所以在下面添加NaN检查

$('#sd-Calculate').on('click', function () {
var checkInput = +($('#sd-property-value').val());
console.log('new clicker');
console.log(checkInput);
if (!Number.isNaN(checkInput) && checkInput > 50) {
console.log('more than');
} else {
console.log("less than");
}
});

如果您想防止在文本框中键入字符串，请将类型更改为"数字">

<input type="number" id="sd-property-value" class="sd-property-value currency input-text" name="sd-calc" />