0

私はjQueryとjavascriptの初心者です。どうぞ、ご容赦ください。このプログラムには、ID がa1、aa1およびの 3 つのテキストボックスがありbaa1ます。

a1は正味重量です。aa1率です。とは、とbaa1の積を持つ読み取り専用のテキスト ボックスです。#a1#aa1

ここで私のフィドルを見てください。積を計算するプログラムを書きました。しかし、何らかの理由で、それは機能していません。

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

これのどこが悪いのか教えてください。

4

3 に答える 3

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 が定義されていません

これは、左側で「ラップなし - ヘッド」を選択することで修正できます。

では、実際のコードの何が問題なのですか? 見つけやすい問題は、jQuery を使用して 2 つの編集可能なテキスト ボックスの内容を読み取っていることです。

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

それは問題ありませんが、テキストボックスは文字列を返し、文字列は乗算できないため、数値に変換する必要があります。整数が必要だと思います：

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

この時点で、最初に 2 番目のテキスト ボックスを編集する限り、機能します。両方のテキスト ボックスから同じ関数を呼び出す必要があります。

<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 とバニラの 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 内のイベント ハンドラーを削除します。これを動作させるには、jsfiddle に配置する必要があります: http://jsfiddle.net/8JA4s/2/onLoad

于 2013-08-22T11:23:30.187 に答える
3

インライン js を使用する代わりに、バインドします。

Shea の提案に従って、変更の代わりに onkeyup を使用します。

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

更新されたフィドル

于 2013-08-22T11:14:25.517 に答える
2

コンソールを見ると、が定義されていないことがわかります。これは、HTML の後に処理されるためです。属性amtcalの代わりに 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 に答える