Just trying to add some numbers and getting stuck 2

[POSAPAY]

Could someone help me to see where my goof-up is?
I'm don't use javascript regularly enough to know it well enough, so any help would be great! This basically seems to run fine on InternetExplorer, but not on Google Chrome.
When I cut it back to single line of adding two numbers, it works fine on google chrome browser. But once everything is in it, it doesn't update any of the form fields.

here is my code:

<script language="javascript">
    function addNumbers() {
        var val1 = parseInt(document.getElementById("StockQty").value);
        var val2 = parseInt(document.getElementById("SOQty").value);
        var val3 = parseInt(document.getElementById("EnrouteQty").value);
        var val4 = parseInt(document.getElementById("ProductionQty").value);
        var ansD = document.getElementById("AvailableQty");
        var ansF = document.getElementById("TotalExpectedQty");
        var val11 = parseInt(document.getElementById("Month1SalesForecastQty").value);
        var val12 = parseInt(document.getElementById("Month2SalesForecastQty").value);
        var val13 = parseInt(document.getElementById("Month3SalesForecastQty").value);
        var val14 = parseInt(document.getElementById("Month4SalesForecastQty").value);

        var val15 = parseInt(document.getElementById("NotallocatedStockQty").value);
        var val16 = parseInt(document.getElementById("TotalExpectedQty").value);

        var val11 = parseInt(document.getElementById("Month1SalesForecastQty").value);
        var val12 = parseInt(document.getElementById("Month2SalesForecastQty").value);
        var val13 = parseInt(document.getElementById("Month3SalesForecastQty").value);
        var val14 = parseInt(document.getElementById("Month4SalesForecastQty").value);


        var ansG = document.getElementById("Month1ForecastedRequirementQty");
        var ansH = document.getElementById("Month2ForecastedRequirementQty");
        var ansI = document.getElementById("Month3ForecastedRequirementQty");
        var ansJ = document.getElementById("Month4ForecastedRequirementQty");
            ansD.value = val1 - val2;
            ansF.value = val1 - val2 + val3 + val4;
            ansG.value = val15 - val16 + val11;
            ansH.value = val15 - val16 + val11 + val12 - ansG.value;
            ansI.value = val15 - val16 + val11 + val12 + val13 - ansH.value - ansG.value;
            ansJ.value = val15 - val16 + val11 + val12 + val13 + val14 - ansI.value - ansH.value - ansG.value;
    }
        </script>

 

[feherke]

Hi

Supposing all those elements got by Id are [tt]input[/tt]s, you should use [tt]parseInt()[/tt] when using their [tt]value[/tt]s in calculations ( note that is better to specify the base to avoid having values starting with '0' parsed as octal ) :

ansH[teal].[/teal]value [teal]=[/teal] val15 [teal]-[/teal] val16 [teal]+[/teal] val11 [teal]+[/teal] val12 [teal]-[/teal] [COLOR=darkgoldenrod]parseInt[/color][teal]([/teal]ansG[teal].[/teal]value[teal],[/teal][purple]10[/purple][teal]);[/teal]
ansI[teal].[/teal]value [teal]=[/teal] val15 [teal]-[/teal] val16 [teal]+[/teal] val11 [teal]+[/teal] val12 [teal]+[/teal] val13 [teal]-[/teal] [COLOR=darkgoldenrod]parseInt[/color][teal]([/teal]ansH[teal].[/teal]value[teal],[/teal][purple]10[/purple][teal])[/teal] [teal]-[/teal] [COLOR=darkgoldenrod]parseInt[/color][teal]([/teal]ansG[teal].[/teal]value[teal],[/teal][purple]10[/purple][teal]);[/teal]
ansJ[teal].[/teal]value [teal]=[/teal] val15 [teal]-[/teal] val16 [teal]+[/teal] val11 [teal]+[/teal] val12 [teal]+[/teal] val13 [teal]+[/teal] val14 [teal]-[/teal] [COLOR=darkgoldenrod]parseInt[/color][teal]([/teal]ansI[teal].[/teal]value[teal],[/teal][purple]10[/purple][teal])[/teal] [teal]-[/teal] [COLOR=darkgoldenrod]parseInt[/color][teal]([/teal]ansH[teal].[/teal]value[teal],[/teal][purple]10[/purple][teal])[/teal] [teal]-[/teal] [COLOR=darkgoldenrod]parseInt[/color][teal]([/teal]ansG[teal].[/teal]value[teal],[/teal][purple]10[/purple][teal]);[/teal]

The used operator being minus ( - ), which is meaningless for strings, probably all browsers will convert them to numbers before preforming the operation. But is better to not rely on that.

And remove the second declaration of the val11, val12, val13 and val14 variables.


Feherke.

http://rootshell.be/~feherke/

 

[POSAPAY]

Hey Feherke, Thanks!

With those changes, I still only have Internet Explorer working. Google Chrome, and FireFox still don't update the fields.

Here is the updated code, and the form fields:

<table>
   <tr>
      <td><input type="text" id="StockQty" name="StockQty" size="3" maxlength="10"
          onchange="javascript:addNumbers()" onfocus="javascript:addNumbers()" onclick="javascript:addNumbers()"/></td>
      <td><input type="text" id="SOQty" name="SOQty" size="3" maxlength="10" 
          onchange="javascript:addNumbers()" onfocus="javascript:addNumbers()" onclick="javascript:addNumbers()"/></td>
      <td><input type="text" disabled id="AvailableQty" name="AvailableQty" size="3" maxlength="10" /></td>

      <td><input type="text" id="EnrouteQty" name="EnrouteQty" size="3" maxlength="10" 
          onchange="javascript:addNumbers()" onfocus="javascript:addNumbers()" onclick="javascript:addNumbers()" /></td>
      <td><input type="text" id="ProductionQty" name="ProductionQty" size="3" maxlength="10" 
          onchange="javascript:addNumbers()" onfocus="javascript:addNumbers()" onclick="javascript:addNumbers()" /></td>
      <td><input type="text" disabled id="TotalExpectedQty" name="TotalExpectedQty" size="3" maxlength="10" /></td>
                                           

      <td align="Right" bgcolor="#F0F0F0"><input type="text" id="Month1SalesForecastQty" name="Month1SalesForecastQty" size="3" maxlength="10" onclick="javascript:addNumbers()" onfocus="javascript:addNumbers()" onchange="javascript:addNumbers()" /></td>
      <td align="Right" bgcolor="#F0F0F0"><input type="text" id="Month2SalesForecastQty" name="Month2SalesForecastQty" size="3" maxlength="10" onclick="javascript:addNumbers()" onfocus="javascript:addNumbers()"  onchange="javascript:addNumbers()" /></td>
      <td align="Right" bgcolor="#F0F0F0"><input type="text" id="Month3SalesForecastQty" name="Month3SalesForecastQty" size="3" maxlength="10" onclick="javascript:addNumbers()" onfocus="javascript:addNumbers()"  onchange="javascript:addNumbers()" /></td>
      <td align="Right" bgcolor="#F0F0F0"><input type="text" id="Month4SalesForecastQty" name="Month4SalesForecastQty" size="3" maxlength="10" onclick="javascript:addNumbers()" onfocus="javascript:addNumbers()" onchange="javascript:addNumbers()"  /></td>

      <td><input type="text" disabled id="Month1ForecastedRequirementQty" name="Month1ForecastedRequirementQty" size="3" maxlength="10" /></td>
      <td><input type="text" disabled id="Month2ForecastedRequirementQty" name="Month2ForecastedRequirementQty" size="3" maxlength="10" /></td>
      <td><input type="text" disabled id="Month3ForecastedRequirementQty" name="Month3ForecastedRequirementQty" size="3" maxlength="10" /></td>
      <td><input type="text" disabled id="Month4ForecastedRequirementQty" name="Month4ForecastedRequirementQty" size="3" maxlength="10" /></td>

      <td><input type="text" id="NotAllocatedStockQty" name="NotAllocatedStockQty" size="3" maxlength="10" /></td>
 </tr>
</table>

<script language="javascript">
    function addNumbers() {
        var val1 = parseInt(document.getElementById("StockQty").value);
        var val2 = parseInt(document.getElementById("SOQty").value);
        var val3 = parseInt(document.getElementById("EnrouteQty").value);
        var val4 = parseInt(document.getElementById("ProductionQty").value);
        var ansD = document.getElementById("AvailableQty");
        var ansF = document.getElementById("TotalExpectedQty");
        var val11 = parseInt(document.getElementById("Month1SalesForecastQty").value);
        var val12 = parseInt(document.getElementById("Month2SalesForecastQty").value);
        var val13 = parseInt(document.getElementById("Month3SalesForecastQty").value);
        var val14 = parseInt(document.getElementById("Month4SalesForecastQty").value);

        var val15 = parseInt(document.getElementById("NotallocatedStockQty").value);
        var val16 = parseInt(document.getElementById("TotalExpectedQty").value);

        var ansG = document.getElementById("Month1ForecastedRequirementQty");
        var ansH = document.getElementById("Month2ForecastedRequirementQty");
        var ansI = document.getElementById("Month3ForecastedRequirementQty");
        var ansJ = document.getElementById("Month4ForecastedRequirementQty");
            ansD.value = val1 - val2;
            ansF.value = val1 - val2 + val3 + val4;
            ansG.value = val15 - val16 + val11;
            ansH.value = val15 - val16 + val11 + val12 - parseInt(ansG.value, 10);
            ansI.value = val15 - val16 + val11 + val12 + val13 - parseInt(ansH.value, 10) - parseInt(ansG.value, 10);
            ansJ.value = val15 - val16 + val11 + val12 + val13 + val14 - parseInt(ansI.value, 10) - parseInt(ansH.value, 10) - parseInt(ansG.value, 10);
    }
        </script>

 

[snitin78]

Capitalize the 'a' and try again:

var val15 = parseInt(document.getElementById("NotAllocatedStockQty").value);

BTW, when using Firefox, have firebug installed and running. It comes in very handy in de-bugging your JS code.

Also, I am not sure if it is the intended behavior or what, by your number updates in the fields seem to be clunky...happens only when I click twice on a particular box. You might want to look at when exactly you want to fire the addNumbers() event.

 

[POSAPAY]

Awsome! Did the trick! I did not know that javascript was so case sensitive. And thanks for the tip for FireFox.