Jump to content

JScript calculator


jscriptnoob
 Share

Recommended Posts

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));
}
<form method="POST" action="submitted.html" name="ofrm">
<table border="0" cellpadding="0" width="550" id="table2" name="ofrm">
<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>
<td align="center" width="100">
<input type="text" name="valA" size="5" tabindex="5" onchange="return validNum(document.ofrm)"></td>
<td align="right" width="60">
<input type="text" name="valD" size="5" tabindex="5" onchange="return validNum(document.ofrm)"></td>
<td align="right" width="140">
<input type="text" name="totalA" size="12" tabindex="99" onchange="calculate()"></td>
</tr>
<tr>
<td width="250">Contract Expenditures</td>
<td align="center" width="100">
<input type="text" name="valB" size="5" tabindex="5" onchange="return validNum(document.ofrm)"></td>
<td align="right" width="60">
<input type="text" name="valE" size="5" tabindex="5" onchange="return validNum(document.ofrm)"></td>
<td align="right" width="140">
<input type="text" name="totalB" size="12" tabindex="99" onchange="calculate()"></td>
</tr>
<tr>
<td width="250">Materials (Consumed or Transformed)</td>
<td align="center" width="100">
<input type="text" name="valC" size="5" tabindex="5" onchange="return validNum(document.ofrm)"></td>
<td align="right" width="60">
<input type="text" name="valF" size="5" tabindex="5" onchange="return validNum(document.ofrm)"></td>
<td align="right" width="140">
<input type="text" name="totalC" size="12" tabindex="99" onchange="calculate()"></td>
</tr>
<tr>
<td width="250"> </td>
<td align="center" width="100"> </td>
<td align="right" width="60"> </td>
<td align="right" width="140"> </td>
</tr>
<tr>
<td width="250">
<p align="right"><b>SUB TOTAL:</b></td>
<td align="center" width="100"> </td>
<td align="right" width="60"> </td>
<td align="right" width="140">$
<input readonly style="border:0px;" class="totals" name="GrandTotal" size="15" tabindex="99" onchange="calculate()"></td>
</tr>
<tr>
Edited by jscriptnoob
Link to comment
Share on other sites

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 by thescientist
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by thescientist
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...