Javascript calculate / update total onclick multiple form elements

Question

Im helping a friend building a basic site. My javascript skills leaves much to be desired so I am learning I started with Javascript instead of Jquery library (sidenote: should I just go with Jquery from the start...?)

So I have the following:

• Form with 3 radio buttons value low(1), medium(2), high(3)
• Slider with amount
• Select with duration.

The formula is calculated by user selecting risk (radio btns) amount (slider) duration (dropdowm)

When the user changes risk, or amount, or duration the total should get updated, and a button displayed.

So I came up with the following javascript:

JAVASCRIPT:

function getReturn(){
    var risk = document.forms[0];
    var years = document.getElementById("investmentDuration").value;
    var slideAmount  = document.getElementById("slideAmount").value;
    var txt;
    var returns;
    var i;
    for(i = 0; i < risk.length; i++){
        if(risk[i].checked){
            txt = risk[i].value;
            //for
            if(txt == 1){
                returns = (slideAmount * 0.06)*years;
                returns = Math.ceil(returns); // NO decimals

            }
            if(txt == 2){
                returns = slideAmount  * 0.11;
                returns = Math.ceil(returns)*years; // NO decimals

            }
            if(txt == 3){
                returns = slideAmount *0.17;
                returns = Math.ceil(returns)*years; // NO decimals
            }
        }//if
    }//for

I then added the getReturn() function to each element in the form...

I get the following when I try and run it, here is my JS FIDDLE

ERROR: getReturn() is not defined

HTML (note the on click function on each element)

 <h2>SELECT INVESTMENT RISK LEVEL</h2>
    <section>
        <div>
           <input type="radio"  id="control_01" onclick="getReturn()" name="risk" value="1" checked>
            <label for="control_01">
                <h2>LOW RISK</h2>
                <p>Slow & Steady. An Product Focused On Low Risk But Long term Gains</p>
            </label>
        </div>
        <div>
            <input type="radio" id="control_02" name="risk" onclick="getReturn()" value="2">
            <label for="control_02">
                <h2>MEDIUM</h2>
                <p>Prepare For Glory. Medium To High Returns, Over A Medium To Long Period.</p>
            </label>
        </div>
        <div>
            <input type="radio" id="control_03" name="risk" onclick="getReturn()" value="3">
            <label for="control_03">
                <h2>High Risk</h2>
                <p>Hardcore Investor. Tailored Based Package Focused on High Returns Over Short Periods</p>
            </label>
        </div>
    </section>

 <h4 style="color: black;">INVESTMENT AMOUNT:</h4>
        <input type="range" id="slideAmount" name="slideAmount" onchange="getReturn()" value="6500" step="25" min="1000" max="10000">

  <p>Number Of Years</p>
            <select  name="investmentDuration" id="investmentDuration" onclick="getReturn()">
                <option value="1" selected>1 Year</option>
                <option value="2">2 Years</option>
                <option value="3">3 Years</option>
                <option value="4">4 Years</option>
                <option value="5">5 Years</option>
            </select>

UPDATE

I got it to work however I feel

1. Having a onclick() / onchange = function() on each element seems inefficient.
2. I feel the code is prone to bugs if the page should get larger and expanded on.

Any constructive criticism and / or advice appreciated on how I can work and improve on this. Many Thanks

Answer 1

You get the

getReturn() is not defined

error because your code is inside an onLoad event (that is the default in jsfiddle)

You need to change this setting as shown in the image so that your function is in the global scope and thus callable from the DOM.

Then you also need to add the #returns element in your html.

A final improvement might be to use the oninput event on the range element so that is updates while you slide

All fixes: https://jsfiddle.net/gaby/o1zmvmL9/2/