JScript calculator

jscriptnoob · January 25, 2014

I know there's a few of these floating around, but none of them touch on what my issue is. Below is the code for my calculator including the html. The issue I'm having is that I think, as far as I can tell, my code to calculate which fields etc. is correct. The results just won't populate in to the total boxes like they should. I expect it's something simple, but this is my first real foray in to coding so I'm still really new at this. Thanks for all the help.

function calculate()

{

var valA= 0;

var valB= 0;

var valC= 0;

var ITCPer= 35%;

var SRClVal= 55%;

var totalA= 0;

var totalB= 0;

var totalC= 0;

var Subtotal= 0;

var GrandTotal= 0;

if (document.ofrm.valA.value > "")

{ valA = document.ofrm.valA.value };

document.ofrm.valA.value = eval(valA);

if (document.ofrm.valB.value > "")

{ valB =document.ofrm.valB.value };

document.ofrm.valB.value = eval(valB);

if (document.ofrm.valC.value > "")

{ valC = document.ofrm.valC.value };

document.ofrm.valC.value = eval(valC);

if (document.ofrm.valD.value > "")

{ valD = document.ofrm.valD.value };

document.ofrm.valD.value = eval(valD);

if (document.ofrm.valE.value > "")

{ valE = document.ofrm.valE.value };

document.ofrm.valE.value = eval(valE);

if (document.ofrm.valF.value > "")

{ valF = document.ofrm.valF.value };

document.ofrm.valF.value = eval(valF);

if (document.ofrm.ITCPer.value > "")

{ ITCPer = document.ofrm.ITCPer.value };

document.ofrm.ITCPer.value = eval(ITCPer);

if (document.ofrm.totalA.value > "")

{ totalA = document.ofrm.totalA.value };

document.ofrm.totalA.value = eval(totalA);

if (document.ofrm.totalB.value > "")

{ totalB = document.ofrm.totalB.value };

document.ofrm.totalB.value = eval(totalB);

if (document.ofrm.totalC.value > "")

{ totalC = document.ofrm.totalC.value };

document.ofrm.totalC.value = eval(totalC);

if (document.ofrm.Subtotal.value > "")

{ Subtotal = document.ofrm.Subtotal.value };

document.ofrm.Subtotal.value = eval(Subtotal);

if (document.ofrm.GrandTotal.value > "")

{ GrandTotal = document.ofrm.GrandTotal.value };

document.ofrm.GrandTotal.value = eval(GrandTotal);

if (document.ofrm.SRClVal.value > "")

{ SRClVal = document.ofrm.SRClVal.value };

document.ofrm.SRClVal.value = eval(SRClVal);

totalA = valA + valD * SRClVal;

document.ofrm.totalA.value = dm(eval(totalA));

totalB = valB + valE * SRClVal;

document.ofrm.totalB.value = dm(eval(totalB))};

totalC = valC + valF * SRClVal;

document.ofrm.totalC.value = dm(eval(totalC));

Subtotal = totalA + totalB + totalC;

document.ofrm.Subtotal.value = dm(eval(Subtotal));

GrandTotal = Subtotal * ITCPer;

document.ofrm.GrandTotal.value = dm(eval(GrandTotal));

}

<tr>

<td width="250" height="31"><b>Item Description</b></td>

<td align="center" width="100" height="31"><b>Value</b></td>

<td align="right" height="31" width="60"><b>Project Length (months) </b></td>

<td align="right" height="31" width="140"><b>Total</b></td>

</tr>

<tr>

<td width="250">Labour Expenditures</td>

</tr>

<tr>

<td width="250">Contract Expenditures</td>

</tr>

<tr>

<td width="250">Materials (Consumed or Transformed)</td>

</tr>

<tr>

</tr>

<tr>

<p align="right"><b>SUB TOTAL:</b></td>

<td align="right" width="140">$

</tr>

<tr>

Edited January 25, 2014 by jscriptnoob

thescientist · January 25, 2014

You're if/else conditional statements aren't really going to work the way you think they are. You can't really compare strings like that. You could check for the length of the string, to see if it's not an empty string.

The biggest issue with a form calculator though is going to be maintaining a state if you will, of inputs, parsing / validating them, and then outputting them. All while keep calculations and element references manageable. I have an example for you, that breaks down all the responsibilities into functions and keeping the format fairly generic. I enforce / utilize a namespacing convention between my inputs and variables, to try and keep the overhead low. It is just one way to do something like this, and I just put it together as a basic proof of concept.

I tried to comment as I went along

<!DOCTYPE html>    <head>    <title>Calculator</title>    <style>      body {        background-color: black;        color: white;      }    </style>  </head>   <body>    <h1>Calculator</h1>    <form method="POST" action="submitted.html" name="ofrm">      <table border="0" cellpadding="0" width="550" id="table2" name="ofrm">        <thead>          <tr>            <td width="250" height="31"><b>Item Description</b></td>            <td align="center" width="100" height="31"><b>Value</b></td>            <td align="right" height="31" width="60"><b>Project Length (months) </b></td>            <td align="right" height="31" width="140"><b>Total</b></td>          </tr>        </thead>        <tbody>          <tr>            <td width="250">Labour Expenditures</td>            <td align="center" width="100">              <input type="text" id="laborExpenditures.quantity" name="valA" size="5" tabindex="5">            </td>            <td align="right" width="60">              <input type="text" id="laborExpenditures.time" name="valD" size="5" tabindex="5">            </td>            <td align="right" width="140">              <input readonly type="text" id="laborExpenditures.total" name="totalA" size="12" tabindex="99">            </td>          </tr>          <tr>            <td width="250">Contract Expenditures</td>            <td align="center" width="100">              <input type="text" id="contractExpenditures.quantity" name="valB" size="5" tabindex="5">            </td>            <td align="right" width="60">              <input type="text" id="contractExpenditures.time" name="valE" size="5" tabindex="5">            </td>            <td align="right" width="140">              <input readonly type="text" id="contractExpenditures.total" name="totalB" size="12" tabindex="99">            </td>          </tr>          <tr>            <td width="250">Materials (Consumed or Transformed)</td>            <td align="center" width="100">              <input type="text" id="materials.quantity" name="valC" size="5" tabindex="5">            </td>            <td align="right" width="60">              <input type="text" id="materials.time" name="valF" size="5" tabindex="5">            </td>            <td align="right" width="140">              <input readonly type="text" id="materials.total" name="totalC" size="12" tabindex="99">            </td>          </tr>        </tbody>      </table>            <p>SUB TOTAL:</p>      $ <input id="total" readonly style="border:0px;" class="totals" name="GrandTotal" size="15" tabindex="99">    </form>  </body>   <script>    "use strict"     //initialize all our variables    var total = 0;     var totalInput = {};    var inputs = [];    var userInputValues = {      laborExpenditures: {        quantity: 0,        time: 0, //months        total: 0      },        contractExpenditures: {        quantity: 0,        time: 0, //months        total: 0      },       materials: {        quantity: 0,        time: 0, //months        total: 0      }    };     //make sure an input is a valid number    //check if it can be parsed as a number, else just return zero    function parseInput(val){      return parseInt(val, 10) ? parseInt(val, 10) : 0;    }     //update our input variables based on parsed user input    //string split on the id to use as a hash map lookup    function updateValuesFromInputs(){      //console.log('ENTER updateValues');      for(var i = 0, l = inputs.length; i < l; i++){        var input = inputs[i];        var namespace = input.id.split('.');  //i.e. ['laborExpenditure','quantity']        var value = input.value;         //ignore totals        if(namespace[1] !== 'total'){          userInputValues[namespace[0]][namespace[1]] = input.value;        }      }    }     //update totals based on user input    function updateTotals(){      //console.log('ENTER updateValues');      var labor = userInputValues.laborExpenditures;      var contract = userInputValues.contractExpenditures;      var materials = userInputValues.materials;       labor.total = parseInput((labor.time * labor.quantity));      contract.total = parseInput((contract.time * contract.quantity));      materials.total = parseInput((materials.time * materials.quantity));       total = labor.total + contract.total + materials.total;    }     //diplay the totals on the page    function displayTotals(){      //console.log('ENTER displayValues');      for(var i = 0, l = inputs.length; i < l; i++){        var input =  inputs[i];        var namespace = input.id.split('.');  //i.e. ['laborExpenditure','quantity']         if(namespace[1] === 'total'){          //don't display a zero unless there is a valid total to display          var currentTotal = userInputValues[namespace[0]].total;          var totalForDisplay = currentTotal === 0 ? '' : currentTotal;           input.value = totalForDisplay;        }      }       totalInput.value = total;    }     //caluclate function to be called on keyup of any writable input    function calculate(){      //console.log('ENTER calculate');      updateValuesFromInputs();      updateTotals();       displayTotals();    }     //init function to run on window.load event    function init(){      //console.log('page is ready - get DOM references');      //get all input elements      var inputElements = document.getElementsByTagName('input');       for(var i = 0, l = inputElements.length; i < l; i++){        var input = inputElements[i];                if(input.id === 'total'){          //assign special reference to total input          totalInput = input;        }else{          //add keyup event to any writable input, that calls calculate          input.addEventListener('keyup', calculate, false);           //push to a local reference of all inputs          inputs.push(input);        }      }    };     //event listener for window.load    window.addEventListener('load', init);  </script> </html>

Edited January 26, 2014 by thescientist

jscriptnoob · January 26, 2014

Thanks for the re-code! I understand to a degree what you did (learning what it all is and how it works). I have a problem though, I put the code in to Edge Code CC and do a "live preview" and it works like a charm. I copy the exact code verbatim and paste it in to a webpage and it doesn't work anymore. Again, probably something really stupid simple, but I can't see what it is.

thescientist · January 26, 2014

Are you looking in the error console? I would start there. If you have a link to the page, then please share that as well. It's hard to say without being able to see what you're seeing.

jscriptnoob · January 28, 2014

I checked the error log and it gave me only one error which I changed to the correct syntax provided. However, now I'm getting an error message saying that CSP is not enabled in my header and the script isn't allowed to run. Sounds to me like this is the issue here, my problem is I've done some research on it and understand that I basically have to allow the CSP for each browser to allow the script to run. I want to make sure I get it right. If that makes any sense?

thescientist · January 28, 2014

what is CSP? Can you at least provide a link? The code works as is, so if it's not working when integrating / porting it to another environment, then it sounds like the issue is the new environment. Which I have details of so it makes it hard to help without actually seeing it live.

jscriptnoob · January 28, 2014

CSP is Content Service Protection. Each browser apparently requires one Firefox, Chrome, Opera and Safari all operate off the same one and IE has it's own so I've read. As for the link its here.

Edited January 28, 2014 by jscriptnoob

thescientist · January 28, 2014

I can see the issue very clearly from looking in the chrome error console.

the error

Uncaught SyntaxError: Invalid regular expression: missing / ?page_id=188:313

line 313

<p>  <script>    "use strict"</p><p>    //initialize all our variables    var total = 0; ...

You have <p> tags all up and in your javascript. I'm not sure how you are developing locally, but something outside of just the code snippet I provided you is altering it.

Edited January 28, 2014 by thescientist

jscriptnoob · January 28, 2014

Will need to deal with the CSS style sheet. Looks like it's defaulting <p> tags for some reason.

Thanks for the help!

Sign In

JScript calculator

Recommended Posts

jscriptnoob

Link to comment

Share on other sites

thescientist

Link to comment

Share on other sites

jscriptnoob

Link to comment

Share on other sites

thescientist

Link to comment

Share on other sites

jscriptnoob

Link to comment

Share on other sites

thescientist

Link to comment

Share on other sites

jscriptnoob

Link to comment

Share on other sites

thescientist

Link to comment

Share on other sites

jscriptnoob

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity