Creating javascript/html form calculator - easy way to do it?

Question

I have 6 input fields: A, B, C, D, E, F, and I have 3 output fields: outA, outB, outC

I need to have outA display the result of the following formula: 365 * 24 * A * B * C * D * 40% * 85%

outB display: (E + F) / outA * 12

And outC display: ((12 * 5)) - outB) / outB

Is Javascript the best way to do this? Are there any online resources that would make this easier? I started using jscalc.io but it doesn't let me access the source code in order to embed it on my site. Is this a high difficulty project? (I'm not great with Javascript, and worse with numbers)

This is pretty simple program you are trying to do. You can find plenty of resources if you just google it. — want2learn, Sep 26 '17 at 20:43
*high difficult* is quite relative to the person who needs to code it. For me it would be propbably done in a couple of minutes. — Jonas Wilms, Sep 26 '17 at 20:44

Ethan · Accepted Answer · 2017-09-27T15:04:50.627

2

Ok, try this, the code should be pretty self-explanatory:

function updateOutputs () {
    var A = parseFloat(document.getElementById('A').value) / 100;
    var B = parseFloat(document.getElementById('B').value) / 100;
    var C = parseFloat(document.getElementById('C').value);
    var D = parseFloat(document.getElementById('D').value);
    var E = parseFloat(document.getElementById('E').value);
    var F = parseFloat(document.getElementById('F').value);

    var outA = 365 * 24 * A * B * C * D * 0.40 * 0.85;
    var outB = ((E + F) / outA) * 12;
    var outC = ((12 * 5) - outB) / outB;

    document.getElementById('outA').value = ((isNaN(outA)) ? '' : outA.toFixed(2));
    document.getElementById('outB').value = ((isNaN(outB)) ? '' : outB.toFixed(1));
    document.getElementById('outC').value = ((isNaN(outC)) ? '' : Math.round(outC * 100) + '%');
}
updateOutputs();

A: <input id="A" onchange="updateOutputs();" value="60" /><br>
B: <input id="B" onchange="updateOutputs();" value="20" /><br>
C: <input id="C" onchange="updateOutputs();" value="5" /><br>
D: <input id="D" onchange="updateOutputs();" value="4" /><br>
E: <input id="E" onchange="updateOutputs();" value="5000" /><br>
F: <input id="F" onchange="updateOutputs();" value="2000" /><br>
outA: <input id="outA" readonly /><br>
outB: <input id="outB" readonly /><br>
outC: <input id="outC" readonly /><br>

edited Sep 27 '17 at 15:04

answered Sep 26 '17 at 20:46

Ethan

4,295
4
25
44

This is great, thank you. I find it easier to understand when I can see it all working together. One issue I'm having is the results for B and C are incorrect. I believe this is being caused by E and F being currency (having decimals) but I'm not sure. – Johnny 2 Tone Sep 26 '17 at 21:28
@Johnny2Tone Ok, could you send me an example of what the inputs need to be in order to give incorrect values for `outB` and `outC`, and also how they're wrong. – Ethan Sep 26 '17 at 21:32
I have updated the JSfiddle to more accurately portray what I am trying to accomplish. I have this in an Excel sheet formula and am trying to pull that into a web interface. I used the CSS section to write the results I get from Excel. https://jsfiddle.net/8magv1b3/ – Johnny 2 Tone Sep 26 '17 at 21:53
adding a decimal before the first 2 inputs results in an accurate result in terms of how the currency should look. Couldn't replicate that by dividing by 100 though (although I may have done that wrong, I'm new to JavaScript). Still can't figure out why I'm not achieving the same results as I am in Excel for the last 2 outputs though – Johnny 2 Tone Sep 26 '17 at 22:22
@Johnny2Tone Ok, after some debugging I discovered the problem to be that it was concatenating `E` and `F` like this `5000 + 2000 = 50002000` instead of adding them. I fixed this with parse floats and everything seems to work now. – Ethan Sep 27 '17 at 09:12
amazing! Thank you! How would I go about allowing the .6 and .2 to be entered as whole numbers and still return the same result? Also, how could I force the result for 11.75 to round up or down? The reason being is that this represents months. I really appreciate your help on this, you are a godsend. Also, do you know of a good place to read up on parse floats as I don't really understand how that solved the issue? Also, my outputs are no longer working/updating... – Johnny 2 Tone Sep 27 '17 at 13:19
@Johnny2Tone See this SO question for reading up on parsefloats https://stackoverflow.com/q/14496531/3088508 Your outputs are probably not working because you're using jsfiddle.net, it didn't work for me either so I used jsbin.com and that worked. I've updated the answer to handle for A and B to be whole numbers. And I don't understand what you mean by wanting to round up or down. – Ethan Sep 27 '17 at 13:45
Sweet, thank you! I just meant that output B is returning 11.75 rather than the 11.8 result in Excel, so I'm assuming Excel is rounding that up. Is there away to remove the output of NaN if certain inputs have no value entered by any chance? – Johnny 2 Tone Sep 27 '17 at 14:54
@Johnny2Tone I've made `outB` round to 1dp instead of 2dp which achieves what you want. I've also fixed the NaN errors. Do you have any other questions? If not, please consider marking this as the accepted answer if possible. – Ethan Sep 27 '17 at 15:06
1

thank you, very much appreciated. I'm going to be playing around and googling a lot this afternoon in order to get a better grasp of how this was achieved, but you answered everything and were a great help! – Johnny 2 Tone Sep 27 '17 at 15:26

Creating javascript/html form calculator - easy way to do it?

1 Answers1