This is my javascript code. here i am trying to multiple two values in each row (totally 7 rows) and then doing addition operation at end of the table. its worked but problem is NaN. when i entered all fields then only it shows the final value. if user entered 5 rows values it shows NaN. I want if they didn't entered few rows remaining rows will be caluculated and shown in text box. how to do....???

function doCal() { 
       var nValue;
       var nValue1;
       nValue = document.getElementById("noofnights").value;
       nValue1 = document.getElementById("rate").value;
       amount=(nValue*nValue1);
       document.getElementById("total").value=amount;
       var nValue2;
       var nValue3;
       nValue2 = document.getElementById("noofnights1").value;
       nValue3 = document.getElementById("rate1").value;
       amount=(nValue2*nValue3);
       document.getElementById("total1").value=amount;
       var nValue4;
       var nValue5;
       nValue4 = document.getElementById("noofnights2").value;
       nValue5 = document.getElementById("rate2").value;
       amount=(nValue4*nValue5);
       document.getElementById("total2").value=amount;
       var nValue6;
       var nValue7;
       nValue6 = document.getElementById("noofnights3").value;
       nValue7 = document.getElementById("rate3").value;
       amount=(nValue6*nValue7);
       document.getElementById("total3").value=amount;
       var nValue8;
       var nValue9;
       nValue8 = document.getElementById("noofnights4").value;
       nValue9 = document.getElementById("rate4").value;
       amount=(nValue8*nValue9);
       document.getElementById("total4").value=amount;
       var nValue10;
       var nValue11;
       nValue10 = document.getElementById("noofnights5").value;
       nValue11 = document.getElementById("rate5").value;
       amount=(nValue10*nValue11);
       document.getElementById("total5").value=amount;
       var nValue12;
       var nValue13;
       nValue12 = document.getElementById("noofnights6").value;
       nValue13 = document.getElementById("rate6").value;
       amount=(nValue12*nValue13);
       document.getElementById("total6").value=amount;
       //total amount
       totalamount=(nValue*nValue1) + (nValue2*nValue3) + (nValue4*nValue5) + (nValue6*nValue7) + (nValue8*nValue9) + (nValue10*nValue11) + (nValue12*nValue13);
       document.getElementById("totalamount").value=totalamount;  
    }

The problem with your code is that you are assuming that every field always has a value. However, undefined * something will always return NaN. It works the same as 0 * anything: 0 times anything is always 0. Example:

var a = undefined;
var b = 15;
var c = a * b;
console.log(c); // Outputs: NaN

var a = undefined || 0;
var b = 15;
var c = a * b;
console.log(c); // Outputs: 0

var a = undefined || 1;
var b = 15;
var c = a * b;
console.log(c); // Outputs: 15

Therefore, you could use the following code to not display NaN values, but a 0 instead of NaN if a field has not been filled in:

var amount;

function doCal() {
    var nValue = document.getElementById("noofnights").value;
    var nValue1 = document.getElementById("rate").value;
    amount = parseFloat((nValue * nValue1)) || 0;
    document.getElementById("total").value = amount;

    var nValue2 = document.getElementById("noofnights1").value;
    var nValue3 = document.getElementById("rate1").value;
    amount = parseFloat((nValue2*nValue3)) || 0;
    document.getElementById("total1").value = amount;

    var nValue4 = document.getElementById("noofnights2").value;
    var nValue5 = document.getElementById("rate2").value;
    amount = parseFloat((nValue4*nValue5)) || 0;
    document.getElementById("total2").value = amount;

    var nValue6 = document.getElementById("noofnights3").value;
    var nValue7 = document.getElementById("rate3").value;
    amount = parseFloat((nValue6*nValue7)) || 0;
    document.getElementById("total3").value = amount;

    var nValue8 = document.getElementById("noofnights4").value;
    var nValue9 = document.getElementById("rate4").value;
    amount = parseFloat((nValue8*nValue9)) || 0;
    document.getElementById("total4").value = amount;

    var nValue10 = document.getElementById("noofnights5").value;
    var nValue11 = document.getElementById("rate5").value;
    amount = parseFloat((nValue10*nValue11)) || 0;
    document.getElementById("total5").value = amount;

    var nValue12 = document.getElementById("noofnights6").value;
    var nValue13 = document.getElementById("rate6").value;
    amount = parseFloat((nValue12*nValue13)) || 0;
    document.getElementById("total6").value = amount;

    //total amount
    totalamount = (nValue*nValue1) + (nValue2*nValue3) + (nValue4*nValue5) + (nValue6*nValue7) + (nValue8*nValue9) + (nValue10*nValue11) + (nValue12*nValue13);
    totalamount = parseFloat(totalamount) || 0;
    document.getElementById("totalamount").value = totalamount;
}

@ minitauros : its worked. but i want to add remaining field values. for example if user did not entered some field values remainig filed values should be automatically added and it should show at end of the table. but here it shown 0 at end of the table...???

Depending on what value you want to automatically get added, you could change the || 0 parts into a value of your choice, e.g. || 15 or || 3387.

@ minitauros : i didn't asked this. b0238752c4ad498c8cdd525cbd91a316 look at this image. you will understand. i want to add the values when usered keyup on the text field. but this code when i entered 7 fields then only it will add and shown.

695e0190bf85eb48105a8e784b0ea4cb look at this image. you will understand. here you can see the final total value is 0. but in that field i want 28800 instead of 0. how to do that?

You want to add all the values in the columns on the right side? What about something like:

var total = (column_1 || 0) + (column_2 || 0) ... etc

?

got it... :-)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.