Why does this return NaN
Question
no matter what i try i cant get the function to run properly
ive tried checked that the inputs are numbers, and only the output is giving me NaN. ive tried putting parseInt around the inputs, but the inputs eem to be working correctly. its probably a small newb mistake, thanks for your time anyway!
const principle=parseInt(document.getElementsByClassName('principle').value);
const rate = parseInt(document.getElementsByClassName('.rate').value);
const payments = parseInt(document.getElementsByClassName('payments').value);
let interest;
function calculate() {
console.log(typeof(principle));
console.log(typeof(rate));
console.log(typeof(payments));
interest = (rate / payments) * principle;
console.log(interest);
};
<body>
<h1>interest calculator</h1>
<div class="container">
<div class="row">
<div class="col-4-md">
initial amount <input type="number" name="" value="" class="principle px-3">
</div>
<div class="col-4-md">
interest rate <input type="number" name="" value="" class="rate px-3">
</div>
<div class="col-4-md">
Number of payments <input type="number" name="" value="" class="payments px-3">
</div>
<button type="submit" name="button" onclick="calculate()">Submit</button>
</div>
</div>
i just want the output to be a number
3 answers
solution1
1 2019-09-05 02:33:23
Here is a working code after modifications/fixes:
<html>
<head>
<script>
let interest;
function calculate() {
const principle=parseInt((document.getElementsByClassName('principle')[0]).value);
const rate = parseInt((document.getElementsByClassName('rate')[0]).value);
const payments = parseInt((document.getElementsByClassName('payments')[0]).value);
console.log(typeof(principle));
console.log(principle);
console.log(typeof(rate));
console.log(rate);
console.log(typeof(payments));
console.log(payments);
interest = (rate / payments) * principle;
console.log(interest);
};
</script>
</head>
<body>
<h1>interest calculator</h1>
<div class="container">
<div class="row">
<div class="col-4-md">
initial amount <input type="number" name="" value="" class="principle px-3">
</div>
<div class="col-4-md">
interest rate <input type="number" name="" value="" class="rate px-3">
</div>
<div class="col-4-md">
Number of payments <input type="number" name="" value="" class="payments px-3">
</div>
<button type="submit" name="button" onclick="calculate()">Submit</button>
</div>
</div>
</body>
</html>
solution2
0 2019-09-05 02:19:27
Becuase typeof NaN is also a number
console.log(typeof NaN)
When you JS code execute the variable are outside the function so the are calculated with as soon as your script load, during that time your inputs hold empty string
console.log(parseInt(''), typeof parseInt(''))
You need to move your variables inside the function so they will be evaluated when the submit button is pressed
function calculate() { const principle = parseInt(document.getElementsByClassName('principle')[0].value); const rate = parseInt(document.getElementsByClassName('rate')[0].value); const payments = parseInt(document.getElementsByClassName('payments')[0].value); let interest; console.log(typeof(principle)); console.log(typeof(rate)); console.log(typeof(payments)); interest = (rate / payments) * principle; console.log(interest); };
<body> <h1>interest calculator</h1> <div class="container"> <div class="row"> <div class="col-4-md"> initial amount <input type="number" name="" value="" class="principle px-3"> </div> <div class="col-4-md"> interest rate <input type="number" name="" value="" class="rate px-3"> </div> <div class="col-4-md"> Number of payments <input type="number" name="" value="" class="payments px-3"> </div> <button type="submit" name="button" onclick="calculate()">Submit</button> </div> </div>
Also you're using getElementsByClassName which returns a node list, you need to access particular node using index
solution3
0 ACCPTED 2019-09-05 02:22:38
You have 2 mistakes in your JS.
1) getByClassName return an array of element, so you must select which element you want in your case, since you have only one element of each, you can easily do document.getElementsByClassName('rate')[0]
2) at the moment you load the page, you assign your values. but when you fill the document, and calculate, you don't check the value again. so they are still undefined.
if you fix everything you will get this JS
const principle$ = document.getElementsByClassName('principle')[0];
const rate$ = document.getElementsByClassName('rate')[0];
const payments$ = document.getElementsByClassName('payments')[0];
let interest;
function calculate() {
console.log(principle$, principle$.value)
const principle = parseInt(principle$.value);
const rate = parseInt(rate$.value);
const payments = parseInt(payments$.value);
interest = (rate / payments) * principle;
console.log(interest);
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.