Failure to calculate the total monthly payment for a car loan. What's going wrong?

Question

Updated code. calculate() still not working. The monthly payment amount is ultimately not being passed to the "total" id box. Does anyone see what the underlying problem is here? My syntax seems to be correct, I believe there may be a problem with my specification of where each variable is applied in the code.

I am having problems getting the function calculate() to pass the correct result in "total." Any possible solutions? The action of clicking the calculate button should display the total, but is displaying nothing at all, as if the button does not activate the calculate function at all.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
function calculate() {
var P = document.getElementById("price").value;
var D = document.getElementById("DP").value;
var R = document.getElementById("R").value;
var N = document.getElementById("N").value;
var i = (R / 1200);
var n = (N * 12);
var m = ((P - D) * i * Math.pow(1 + i,n)) / (Math.pow(1 + i,n) - 1);
var result = document.getElementById('total');
    result.value = m;}
</script>
</head>
<div align="center">
    <hr>
    <form name id="Main">
        <input type="number" id="price" placeholder="Price of the Car"/>
        <br>
        <br>
        <input type="number" id="DP" placeholder="Down Payment"/>
        <br>
        <br>
        <input type="number" id="R" placeholder="Annual % Rate"/>
        <br>
        <br>
        <input type="number" id="N" placeholder="# of Years Loaned"/>
        <br>
        <br>
        <input type="button" id="calculate" value="Calculate" onclick="javascript:calculate();"/>
        <br>
        <br>
        <input type="number" id="total" placeholder="Total Cost..." readonly=""/>
        <br>
        <br>
        <input type="reset" value="Reset">
    </form>
    <hr>
</div>
</html>

No, it's not. But it is not intended for view layout, just to break a line of text. Many people still use it, and it's ok for a quick test or something like that, but for layout you should use css properties, div positioning, etc. See http://www.w3schools.com/tags/tag_br.asp — jotadepicas, Jun 14 '15 at 03:41
@user9018 The question has been edited to contain correct code, it won't help anybody else with the same problem. Please consider editing the question so that the answers matches your question. — Ruan Mendes, Jun 14 '15 at 04:39

jotadepicas · Answer 1 · 2015-06-14T04:16:20.490

3

Use Math.pow() function instead. The ^ operator is not for mathematical power operations (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow).

Also, It's result.value = m, not the other way around :)

Also 2: R and M seem undefined to me, you have to initialize those variables with something, like you did with P and D.

Also 3: use chrome dev tools or anything like that. It will make your life much easier. Remember, javascript doesn't mean "no IDE" :D

edited Jun 14 '15 at 04:16

answered Jun 14 '15 at 03:25

jotadepicas

2,389
2
26
48

How would I apply this to a variable, say n? – lizardwizard Jun 14 '15 at 03:29
No problem, just Math.pow(123, n) for example. You can use n as an argument for any function call, including pow. Have in mind that this is functional programming so 2^3 becomes Math.pow(2,3). See? – jotadepicas Jun 14 '15 at 03:35
Starting to understand, I've never come across superscripts before in a function. So in this case of var m = ((P - D) * i * (1 + i)^n) / ((1 + i)^n - 1); ... how would Math.pow (x,n) be utilized to produce the correct function? – lizardwizard Jun 14 '15 at 03:39
1

substitute `(1 + i)^n` with `Math.pow((1 + i), n)` – Samuel Liew Jun 14 '15 at 03:42
1

For example, replace (1+i)^n with Math.pow(1+i, n). However, this is a general thing, it's not superscript specific or anything. Imagine if it were something like Math.add(a,b) instead of a + b. It's a function call instead an operator, nothing more. Not all operators exist in all languages, so in this case, while you can use + to add, you must use the pow() function to raise a number to a power. – jotadepicas Jun 14 '15 at 03:43
Okay thank you, that has been applied. Now just need to solve the problem with the total not being calculated. – lizardwizard Jun 14 '15 at 03:44
1

Can you update your answer and also indicate which error or behavior are you getting? Also, glad it helped, but more importantly, did you understand why? – jotadepicas Jun 14 '15 at 03:49
Yes! That helped me immensely, I thank you again. Now I will be able to use Math.pow() correctly in the future. Now to getting this function to work correctly. Basically, I am not getting a total to display upon clicking the id "calculate" button. – lizardwizard Jun 14 '15 at 03:53
1

It's result.value = m, not the other way around! – jotadepicas Jun 14 '15 at 03:54
Fixed. Still trying to get the total to display. – lizardwizard Jun 14 '15 at 03:56
Try degugging it. For example I would divide the problem into smaller problems. I would hardcode a value to m (let's say... 42), and see if that displays. If that works, then you have a problem in the calculations part. If it doesn't, then it's a js/html problem. – jotadepicas Jun 14 '15 at 03:57
Still no result, even with a hardcoded value assigned to m. I am stumped here! it must be something simple I am overlooking – lizardwizard Jun 14 '15 at 04:01
I edited my answer with more info, I believe you havent initialized R and N properly, before trying to use them to calculate n and i. (Or are you doing that someplace else?) – jotadepicas Jun 14 '15 at 04:03
Also, use the developer tools in chrome for example, and have a look at the javascript console, it will indicate you if something is exploding before reaching the line that sets the value. – jotadepicas Jun 14 '15 at 04:05
1

The ^ operator DOES exist in javascript, but it's something entirely different: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR – y34h Jun 14 '15 at 04:09
Completely correct @y34h, I meant the "power" operator does not exist. Hence the unexpected results :P. I'll update my answer, good point. – jotadepicas Jun 14 '15 at 04:11
How would you define these variables? There may be some confusion from my IDs and my variable names, this may be causing the function to not run properly. M is the total, would I need to define it as var M = main.M.value; ? Also, @y34h how would I use that operator in my m variable? – lizardwizard Jun 14 '15 at 04:18
R is not being initialized. You have to do something like R = Main.R.value. Binding of your input fields and your JS variables does not happen automatically. It's the same you did with P. – jotadepicas Jun 14 '15 at 04:22
See vitr's answer. The user fixed your entire code for you. – jotadepicas Jun 14 '15 at 04:24
Thank you for your help as well, @jotadepicas – lizardwizard Jun 14 '15 at 04:38

score 3 · Answer 2 · edited May 23 '17 at 12:05

3

Unfortunately, your original code will never work, as it has too many errors.
Here is the corrected fiddle for you, please, have a look: http://jsfiddle.net/q330fqw8/

function calculate() {
  var P = document.getElementById("price").value;
  var D = document.getElementById("DP").value;
  var R = document.getElementById("R").value;
  var N = document.getElementById("N").value;
  var i = (R / 1200);
  var n = (N * 12);
  var m = ((P - D) * i * Math.pow(1 + i,n)) / (Math.pow(1 + i,n) - 1);
  var result = document.getElementById('total');
  result.value = m;
}

I removed id="calculate" in HTML, because of this: Why JS function name conflicts with element ID?
In Javascript, the 4 variables P,D,R,N should be set properly. Finally, this m.value = result; -> result.value = m;
but I guess, you've already corrected some errors in the question. I worked with your original code.

edited May 23 '17 at 12:05

Community

1
1

answered Jun 14 '15 at 04:22

vitr

6,766
8
30
50

3

I think it would be more educational to the poster if you enumerate all the corrections you did to the code, than just saying "it has too many errors". I upvoted your answer however. – jotadepicas Jun 14 '15 at 04:31
1

@vitr You are a saint, thank you! Curious though, what were the critical errors that were preventing the result to display? I would like to know in order to self educate. Thank you again, by the way. – lizardwizard Jun 14 '15 at 04:37
totally agree, hopefully he will go through line by line, as everything there is pretty basic stuff – vitr Jun 14 '15 at 04:38
New html programmer here. It was pretty simple, it has been a long day and I was totally perplexed! – lizardwizard Jun 14 '15 at 04:39
Glad you finally got it to work! But please take the advice on using developer tools and google some javascript debugging techniques and such, it will help you a great deal :) – jotadepicas Jun 14 '15 at 04:41
@user9018 please re-edit you question to add both your original code and the corrected version, so it is useful to other users. – jotadepicas Jun 14 '15 at 04:44
1

Aptana Studio 3 uses Mozilla Firefox for the browser. I will start researching how to use their debugger. – lizardwizard Jun 14 '15 at 04:45
1

Updated the answer, @user9018 , please, don't be overwhelmed, we all do same mistakes all the time. – vitr Jun 14 '15 at 04:51

score 0 · Accepted Answer · answered Jun 14 '15 at 04:46

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate() {
    var P = document.getElementById("price").value;
    var D = document.getElementById("DP").value;
    var R = document.getElementById("R").value;
    var N = document.getElementById("N").value;
    var i = (R / 1200);
    var n = (N * 12);
    var m = ((P - D) * i * Math.pow(1 + i,n)) / (Math.pow(1 + i,n) - 1);
    var result = document.getElementById('total');
        result.value = m;}
</script>
</head>
<div align="center">
<hr/>
<form id="Main">
    <input type="number" id="price" placeholder="Price of the Car" />
    <br />
    <br/>
    <input type="number" id="DP" placeholder="Down Payment" />
    <br/>
    <br/>
    <input type="number" id="R" placeholder="Annual % Rate" />
    <br/>
    <br/>
    <input type="number" id="N" placeholder="# of Years Loaned" />
    <br/>
    <br/>
    <input type="button" value="Calculate Monthly Payment" onclick="calculate();" />
    <br/>
    <br/>
    Total Monthly Payment:<input type="number" id="total" placeholder="Total Cost..." readonly="" />
    <br/>
    <br/>
    <input type="reset" value="Reset" />
</form>
<hr/>
</div>

Failure to calculate the total monthly payment for a car loan. What's going wrong?

3 Answers3