Javascript ROI Calculator

by John H
3 minutes

I created a little calculator tool in JS that a user can input their cost, and gains and get the ROI calculated back. I also created an additional form that will take the cost plus the percentage return and calculate the amount of gains you would have to get in order to satisfy the ROI. The tool is really simple, but I wanted to try out building some JS tools that were self contained and could work on their own. You can checkout the tool here ROI Calculation Tool

Troubles

Building it was straightforward and helped me to learn more about executing math with JS. The biggest problem I encountered didn't even have to do with the function - it was preventing the form from submitting and refreshing the page. I've had to do this before - but it was still a pain point that requires stopping the form's default execution with an event.preventDefault() function.
Other issues were getting passing the values in JS objects and updating the dom elements. Once I cracked the default refresh and got the elements to update the rest was straight forward. Here's the code

<div class="tool">
    <h1>ROI Tool</h1>
    <form id="calForm">

    If I buy something at <input id="cost_input" type="text" name="cost_input" value="100"> <br>
    And Sell it at <input id="gains_input" type="text" name="gains_input" value="105"><br>

    <br>
    <button id="roiClick" name="submit">Submit</button>
</form>

<h1>My ROI IS <span id="roi"></span></h1>
<i>ROI = (Gains – Cost)/Cost</i><BR><BR>

COST: <span id="cost"></span><BR>
Gains: <span id="gains"></span><BR>

<script>

var cost, returnVal;

function calRoi() {
    var cost = document.getElementById("cost_input").value;
    var gains = document.getElementById("gains_input").value;

    var roiVal = roi(cost, gains);
    var calc = {
        'cost' : '$' + cost,
        'gains' : '$' + gains,
        'roi' : roiVal
    };

    updateThis(calc);
}

function roi(cost, gains) {
    cost = parseFloat(cost);
    gains = parseFloat(gains);

    var top, bottom;
    top = gains - cost;
    bottom = top / cost;
    var roiVal = bottom;

    roiVal = roiVal * 100;
    return roiVal + '%';
}

function updateThis(stuff) {
    document.getElementById('roi').innerHTML = stuff.roi;
    document.getElementById('cost').innerHTML = stuff.cost;
    document.getElementById('gains').innerHTML = stuff.gains;
}

document.getElementById('calForm').addEventListener('submit', function(e){
    e.preventDefault();
    calRoi();
});

</script>
</div>

Related Articles

Why is Javascript so popular

The last 4 years has seen Javascript hotness like never before. You have a language that is native...

John H John H
4 minutes

Javascript InnerHTML Table Issues with AJAX

If you need to use Javascript innerHTML to update an element on the page you may run into issues...

John H John H
~1 minute

JavaScript Concatenation and Multiple Line Variables

JavaScript has some idiosyncrasies that make me want to pull my hair out sometimes. The worst part...

John H John H
2 minutes