0

我是 jQuery 和 javascript 的初学者。所以，请多多包涵。在这个程序中，我有 3 个文本框，它们的 id 分别是a1：aa1和baa1.

a1是净重；aa1是比率；andbaa1是一个只读文本框，其乘积为#a1和#aa1。

请在这里看看我的小提琴。我写了一个程序来计算产品。但由于某种原因，它不起作用。

function amtcal(id)
{    
var ntwt=$("#a1").val();
var rval=$("#aa1").val();
var product=rval*ntwt;
$("#baa1").val(product);
}

请告诉我这有什么问题。

4

3 回答 3

3

而不是使用内联js，绑定它：

根据 Shea 的建议，使用 onkeyup 而不是 change。

$("#a1, #aa1").on('keyup', function(){
   amtcal($(this).prop('id'));
});

更新的小提琴

于 2013-08-22T11:14:25.517 回答
3

这里有一些问题，但让我们从与您的代码无关的问题开始。在 JSFiddle 中，您可以选择放置 javascript 的位置 - 默认设置是onload在原始 jsfiddle 的输出中生成的 javascript 如下所示：

$(window).load(function(){
function amtcal(id)
{    
var ntwt=$("#a1").val();
var rval=$("#aa1").val();
var product=rval*ntwt;
$("#baa1").val(product);
}
});

这意味着您的函数在该窗口加载函数的范围内，因此完全无法从 DOM 访问。因此错误：

ReferenceError：未定义 amtcal

这可以通过选择左侧的“No wrap - in head”来解决。

那么您的实际代码有什么问题？一个容易发现的问题是您正在使用 jQuery 阅读两个可编辑文本框的内容：

var ntwt=$("#a1").val();
var rval=$("#aa1").val();

没关系，但是文本框返回字符串，并且字符串不能相乘，所以你必须将它们转换为数字。我假设你想要整数：

var ntwt= parseInt($("#a1").val(),10);
var rval= parseInt($("#aa1").val(),10);

此时它可以工作，只要您先编辑第二个文本框。您需要从两个文本框中调用相同的函数：

<input placeholder="Net Wt" id="a1" onchange="amtcal(this.id)">
<input id="aa1"  placeholder="Rate" style="width:50px;" onchange="amtcal(this.id)">

此时一切正常：http: //jsfiddle.net/8JA4s/

但是，您正在混合使用 jQuery 和 vanilla javascript/DOM。通常更容易坚持使用其中一种来避免混淆。

执行此操作的典型方法是使用 jQuery 附加事件处理程序.on

$('#a1, #aa1').on('change',function(){
   var ntwt=parseInt($("#a1").val(),10);
   var rval=parseInt($("#aa1").val(),10);
   var product=rval*ntwt;
   $("#baa1").val(product);
});

当然，这样做时，您会删除 DOM 中的事件处理程序。这应该放在onLoadjsfiddle 中才能工作：http: //jsfiddle.net/8JA4s/2/

于 2013-08-22T11:23:30.187 回答
2

如果您查看控制台，您会看到它说amtcal未定义，因为它是在 HTML 之后处理的 - 使用 javascript 来附加事件处理程序而不是onchange=""属性。

HTML：

<input placeholder="Net Wt" id="a1">
<input id="aa1"  placeholder="Rate" style="width:50px;">
<input id="baa1" readonly>

JS：

function amtcal()
{    
    var ntwt=$("#a1").val();
    var rval=$("#aa1").val();
    var product=rval*ntwt;
    $("#baa1").val(product);
}

$("#a1,#aa1").change(amtcal);//easier to use if both inputs trigger the update

更新了 JSFiddle

于 2013-08-22T11:13:56.157 回答