0

ここに、JavaScript と HTML コーディングを投稿しました。ユーザーが合計の計算ボタンをクリックすると、すべての値が追加され、テキストボックスに表示されます。それは完璧に機能します。しかし問題は、ユーザーが入力した場合 (合計 7 行 ftotal,ftotal1,ftotal2,ftotal3,ftotal4,ftotal5,ftotal6) 5 行の値を入力し、[合計の計算] ボタンをクリックするとテキスト フィールドに NaN が表示されることです。ボタンをクリックすると、残りの行が計算されてテキストボックスに表示されます....???

JavaScript 

function calfinal(frm) {
    var ftotal = frm.ftotal.value
    var ftotal1 = frm.ftotal1.value
    var ftotal2 = frm.ftotal2.value
    var ftotal3 = frm.ftotal3.value
    var ftotal4 = frm.ftotal4.value
    var ftotal5 = frm.ftotal5.value
    var ftotal6 = frm.ftotal6.value
    var calc = 0
        ftotal = parseFloat(ftotal)
        ftotal1 = parseFloat(ftotal1)
        ftotal2 = parseFloat(ftotal2)
        ftotal3 = parseFloat(ftotal3)
        ftotal4 = parseFloat(ftotal4)
        ftotal5 = parseFloat(ftotal5)
        ftotal6 = parseFloat(ftotal6)
        answer = ftotal + ftotal1 + ftotal2 + ftotal3 + ftotal4 + ftotal5 + ftotal6
        frm.calc.value = answer
}

HTML

<tr>
    <td height="30" class="tabform"><input type="text" size="10" name="ftotal" /></td>
</tr>
<tr>
    <td height="30" class="tabform"><input type="text" size="10" name="ftotal1"/></td>
</tr>
<tr>
    <td height="30" class="tabform"><input type="text" size="10" name="ftotal2"/></td>
</tr>
<tr>
    <td height="30" class="tabform"><input type="text" size="10" name="ftotal3"/></td>
</tr>
<tr>
    <td height="30" class="tabform"><input type="text" size="10" name="ftotal4"/></td>
</tr>
<tr>
    <td height="30" class="tabform"><input type="text" size="10" name="ftotal5"/></td>
</tr>
<tr>
    <td height="30" class="tabform"><input type="text" size="10" name="ftotal6"/></td>
</tr>
<tr>
    <td height="15"><input type="button" value="Calculate Total" onClick="calfinal(this.form);" /></td>
    <td height="15" align="center"><input type="text" size="10" name="calc" readonly="readonly" /></td>
</tr>
4

3 に答える 3

1

関数isNaNを使用して、各値が数値であることを確認します。

そうでない場合は、計算に含めないか、0 に設定します。

このようなもの：

function calfinal(frm) {
    var ftotal = frm.ftotal.value
    var ftotal1 = frm.ftotal1.value
    var ftotal2 = frm.ftotal2.value
    var ftotal3 = frm.ftotal3.value
    var ftotal4 = frm.ftotal4.value
    var ftotal5 = frm.ftotal5.value
    var ftotal6 = frm.ftotal6.value
    var calc = 0
    ftotal = (!isNaN(ftotal) && ftotal!="") ? parseFloat(ftotal) : 0
    ftotal1 = (!isNaN(ftotal1) && ftotal1!="") ? parseFloat(ftotal1) : 0
    ftotal2 = (!isNaN(ftotal2) && ftotal2!="") ? parseFloat(ftotal2) : 0
    ftotal3 = (!isNaN(ftotal3) && ftotal3!="") ? parseFloat(ftotal3) : 0
    ftotal4 = (!isNaN(ftotal4) && ftotal4!="") ? parseFloat(ftotal4) : 0
    ftotal5 = (!isNaN(ftotal5) && ftotal5!="") ? parseFloat(ftotal5) : 0    
    ftotal6 = (!isNaN(ftotal6) && ftotal6!="") ? parseFloat(ftotal6) : 0

    if(!isNaN(ftotal6))
    {
        console.log(ftotal6)        
    }
    answer = ftotal + ftotal1 + ftotal2 + ftotal3 + ftotal4 + ftotal5 + ftotal6
    frm.calc.value = answer
}

これが動作する例http://jsfiddle.net/CdsBW/

おそらくこれを関数に短く編集します：

function validateNumber(number)
{
    return (!isNaN(number) && number!="") ? parseFloat(number) : 0
}
于 2013-10-11T06:57:30.787 に答える
0

入力フィールドがすべて読み取り専用であるため、ユーザーが値を入力する方法がわかりません。とにかく、値を 0.0 に初期化したり、parseFloat を呼び出す前に値をチェックする独自の関数を作成したりしないのはなぜですか?

于 2013-10-11T06:53:39.993 に答える
0

これを試すことができます。デフォルト値も提供できる場合、ユーザーは追加する前に値を入力する必要がありますDemo

function calfinal(frm)
{
   var ele =frm.getElementsByTagName('input');
   for(var i=0;i<ele.length-1;i++) // -1 is for excluding last input element used to diplay result
   {
     if(ele[i].value == "" && ele[i].getAttribute('type')=='text')
     {
         alert("required field");
         ele[i].focus();
         return;
     }
   }

   // below this write your code for addition
}

提供された価値のあるボックスのみを追加したい場合は、試すことができます

function calfinal(frm)
{
   var ele =frm.getElementsByTagName('input');
   var sum=0;
   for(var i=0;i<ele.length-1;i++)
   {
     if(ele[i].value != "" && ele[i].getAttribute('type')=='text')
     {
         sum += parseFloat(ele[i].value);
     }

   }

   // sum will contain the result
}
于 2013-10-11T06:57:31.530 に答える