Keyup函数不适用于表单输入
Keyup function not working on form input
希望有人能阐明我的问题。我有三个输入字段,当所有三个字段都被填充时,它们会计算公式。我使用keyup功能来检测字段何时有内容,但就我的生活而言,我无法让它工作。任何帮助都将不胜感激。
$(".input-sm").each(function() {
$(this).keyup(function() {
calculateStuff();
});
});
function calculateStuff() {
//add only if the value is number
if (!isNaN($('#pa').val()) && $('#pa').val().length != 0) {
pa = parseFloat(this.value);
}
if (!isNaN($('#de').val()) && $('#de').val().length != 0) {
de = parseFloat(this.value);
}
if (!isNaN($('#pr').val()) && $('#pr').val().length != 0) {
pr = parseFloat(this.value);
}
re = pa + de + pr;
stuff = ((pr - de) / (re)) * 100;
$("#value").html(stuff);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="value" class="m-t-50">Stuff = 0</h1>
<input type="text" class="form-control input-sm" id="de">
<input type="text" class="form-control input-sm" id="pa">
<input type="text" class="form-control input-sm" id="pr">
1st:您可以使用.keyup而无需。每个
$(".input-sm").on('keyup',function() {
calculateStuff($(this));
});
第二步:在进入if statments 之前,尝试用0定义变量
3rd:this.value
将不返回任何内容,因此将el传递给函数$(el).val()
并在键控中使用
function calculateStuff(el) {
var pa = 0, de = 0, pr = 0 , re = 0, stuff = 0;
//add only if the value is number
if (!isNaN($('#pa').val()) && $('#pa').val().length != 0) {
pa = parseFloat($(el).val());
}
if (!isNaN($('#de').val()) && $('#de').val().length != 0) {
de = parseFloat($(el).val());
}
if (!isNaN($('#pr').val()) && $('#pr').val().length != 0) {
pr = parseFloat($(el).val());
}
re = pa + de + pr;
stuff = ((pr - de) / (re)) * 100;
$("#value").html(stuff);
}
我试过你的代码。您在控制语句中使用(this.value),而"this"是未定义的,实际上您并没有从它的来源引用它。将您的(this.value)替换为输入元素的相应id,就像这样=>($('#pa').val()).
//e.g.
pa = parseFloat($('#pa').val());
我测试过了,效果很好。
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 如何在submit to sightly时将表单输入值作为参数传递给WCMUsePojo
- 单击鼠标,用MySQL数据填充html表单输入字段
- 从HTML表单发布blob的表单输入类型是什么
- 在不使用PHP的情况下将表单输入值获取到Javascript中
- 在Chrome中重新加载页面后清除表单输入值
- CasperJS填充表单-输入名称有方括号
- 表单输入字段随着溢出的文本而增长
- Highcharts:根据表单输入动态显示数据
- 如何在为表单输入分别处理$(this)和$时编写DRY代码
- 如何从AngularJS表单输入中生成一个永久变量
- 将表单输入保存到txt,弹出结果,不更改页面
- 在表单输入字段中创建默认值
- 如何根据提交表单时下拉框中的值禁用html表单输入框
- 使用jQuery延迟表单输入,并在延迟后在同一页面上显示结果
- Jquery无法找到给定表单id的表单输入
- 如何使用javascript验证在表单输入中避免负值、浮点值和十进制值
- 对表单输入执行计算
- Javascript 重复表单输入
- 使用 JavaScript 计算并添加表单输入的值