js function not returning onclick

Question

I've created a function that I can't get to return with onclick.

I'm sure it's something v simple i'm missing.

HTML:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="schedule.js"></script>
</head>
<body>

     <input type="button" onclick="computeSchedule();" value="Submit" /><br>
     <p id="scheduleOutput"></p>

</body>
</html>

JS:

function computeSchedule(loan_amount, interest_rate, payments_per_year, years, payment) {
var schedule = [];
var remaining = loan_amount;
var number_of_payments = payments_per_year * years;

for (var i=0; i<=number_of_payments; i++) {
    var interest = remaining * (interest_rate/100/payments_per_year);
    var principle = (payment-interest);
    var row = [i, principle>0?principle:0, interest>0?interest:0, remaining>0?remaining:0];
    schedule.push(row);
    remaining -= principle
}

return schedule;
}

var list = JSON.stringify(computeSchedule(100000, 0.005, 12, 15, 843.86), 0, 4)

document.getElementById('scheduleOutput').innerHTML = list;

I can get the function to automatically return in jsFiddle onload, but when I change js settings to "no wrap - in head"it doesn't work. I assume whatever is happening there is also happening when I try to run outside of jsFiddle?

Try moving your script tag lines to the bottom of your HTML, just before the closing body tag. — glhrmv
– glhrmv, Commented Jun 19, 2017 at 21:41
When you're loading the schedule.js file, JavaScript code runs immediately, and at this point the HTML is not parsed as the DOM yet (which is why you get undefined as a result of document.getElementById). Try moving the loading of schedule.js to the bottom of the <body> tag (right before </body>). This is exactly as choosing "no wrap, in <body>" in JS Fiddle. — Catalyst
– Catalyst, Commented Jun 19, 2017 at 21:43
yep that did it. thanks. Knew it would be simple for someone. — auley_code
– auley_code, Commented Jun 19, 2017 at 21:48

Artem Arkhipov · Accepted Answer · 2017-06-19 21:58:47Z

1

You sripts runs before body content is ready. That is why document.getElementById seems not to be working, because such element does not exist at this point of time.

Try to wrap your code in simple "content load" listener to be sure that it will be run after all elements are ready:

document.addEventListener('DOMContentLoaded', function() {
    function computeSchedule(loan_amount, interest_rate, payments_per_year, years, payment) {
        var schedule = [];
        var remaining = loan_amount;
        var number_of_payments = payments_per_year * years;

        for (var i=0; i<=number_of_payments; i++) {
            var interest = remaining * (interest_rate/100/payments_per_year);
            var principle = (payment-interest);
            var row = [i, principle>0?principle:0, interest>0?interest:0, remaining>0?remaining:0];
            schedule.push(row);
            remaining -= principle
        }

        return schedule;
    }

    var list = JSON.stringify(computeSchedule(100000, 0.005, 12, 15, 843.86), 0, 4)

    document.getElementById('scheduleOutput').innerHTML = list;
});

And yes, your onclick is now passing no data to the function. So, you also need to pass params to it and everything should work fine.

answered Jun 19, 2017 at 21:58

Artem Arkhipov

7,5256 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

auley_code Over a year ago

Yes that works, however I'm trying to go one step further and use variables in the function. Essentially what I'm trying to create is a mortgage calculator where a user enters loan amount(100000), rate (0.005), years(15). I then calc the monthly payment (843.86) from another function and return this to html. Any ideas how I could run the computeSchedule function on button click after previous functions have been run? Thanks

Stephen Adkins · Accepted Answer · 2017-06-19 21:40:59Z

0

When you're click on the button the function computeSchedule() is firing, but no values are being passed to it. I'm will to bet if you put value in the parameter on the html line it would work.

<input type="button" onclick="computeSchedule(100000, 0.005, 12, 15, 843.86);" value="Submit" />

answered Jun 19, 2017 at 21:40

Stephen Adkins

1001 silver badge9 bronze badges

Collectives™ on Stack Overflow

js function not returning onclick

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related