How do I get my javascript code to calculate the numbers and not return undefined or Nan?

Question

My javascript code for a simple interest calculator keeps return NaN for the amount whenever I try to calculate it. It seems like the code assumes Im trying to concatenate a string whenever it sees the + and I dont know what to do about that.

I have tried to use parseInt and parseFloat but its the same issue.

Can someone please tell me what Im doing wrong?

here is the code;

<!DOCTYPE html>
<html>
    <head>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Simple Interest Calculator</title>
</head>
    <body>
    <div class="container">
        <h1>Simple Interest Calculator</h1>
        
        <form id="form1">
        <label for="Amount"></label>
        Amount <input type="number"  id="principal">  
        <br/>
        <br/>
        <label for="Interest Rate"></label>
        <label for="Interest Rate">Interest Rate</label>
    <input onchange=updateValue(this) type="range" id="rate" min="1" max="20" step="0.25" default value="10.25">
    <span id="rate_val">10.25%</span>
        <br/>
        <br/>
        <label for="No. of Years"></label>
        No. of Years <select id="years">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <!-- fill in the rest of the values-->
        </select> 
        <br/>
        <br/>
        
        <label for="Compute Interest"></label>
        <button onclick="compute()">Compute Interest</button>
        <br/>
        <br/>
        <span id="result"></span>
        <br/>
        <br/>

        </form>
        <br/>
        <br/>
       
        <footer>&#169; Everyone Can get Rich.<br/>This Calculator belongs to </footer>
        </div>

    </body>
    </html>

And the javascript

<script>
let principalEl = document.querySelector("#principal");
let rateEl = document.querySelector("#rate");
let rateOutputEl = document.querySelector('#rate_val');
let yearsEl = document.querySelector("#years");
let formEl = document.querySelector('#form1');
let result = document.querySelector("#result");


formEl.addEventListener('submit', e => {
  e.preventDefault();
  
  if (!checkData())
    return;

  let principal = principalEl.value;
  let rate = rateEl.value;
  let year = yearsEl.value;

  let interest = principal.value * years.value * rate.value / 100;
  let amount = principal.value + interest.value;
  
  let endYear = new Date().getFullYear() + parseInt(years.value);
    
  
  result.innerHTML = `If you deposit ${principal},<br \>at an interest rate of ${rate}%<br \>You will receive an amount of ${amount},<br \>in the year ${endYear}<br \>`;
});

rateEl.addEventListener('input', e => {
  rateOutputEl.textContent = e.target.value + '%';
});
function checkData() {
  let principal = principalEl.value;
  if (!principal || parseFloat(principal) < 0) {
    alert("Enter a positive number");
    principalEl.focus();
    return false;
  }
  
  return true;
}

</script>

This is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. — David, Oct 05 '22 at 16:48

Lukas · Answer 1 · 2022-10-05T17:53:10.340

1

When you take value from variable you don't have to add .value just write name of the variable. I know that it can also be reference to element with that id in visual studio code but then id interest doesn't exist. Change it

let interest = principal.value * years.value * rate.value / 100;
let amount = principal.value + interest.value;

to it

let interest = principal * year * rate / 100;
let amount = principal + interest;

edited Oct 05 '22 at 17:53

answered Oct 05 '22 at 16:52

Lukas

2,263
1
4
15

What this is saying is that `principalEl` is the dom element, `let principal = principalEl.value` assigns the element's the value to a variable called "principal". (it's a string, and probably ought to be *explicitly* converted to a number). `principal.value` is undefined. – danh Oct 05 '22 at 17:30
in visual studio code you can use id instead of document.querySelector('#id') – Lukas Oct 05 '22 at 17:52

score 0 · Accepted Answer · answered Oct 05 '22 at 17:24

            <!DOCTYPE html>
            <html>
            <head>
                <title>Simple Interest Calculator</title>
            </head>
            <body>
                <div class="container">
                <h1>Simple Interest Calculator</h1>

                <form id="form1">
                    <label for="Amount"></label>
                    Amount <input type="number" id="principal" />
                    <br />
                    <br />
                    <label for="Interest Rate"></label>
                    <label for="Interest Rate">Interest Rate</label>
                    <input
                    onchange="updateValue(this)"
                    type="range"
                    id="rate"
                    min="1"
                    max="20"
                    step="0.25"
                    default
                    value="10.25"
                    />
                    <span id="rate_val">10.25%</span>
                    <br />
                    <br />
                    <label for="No. of Years"></label>
                    No. of Years
                    <select id="years">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <!-- fill in the rest of the values-->
                    </select>
                    <br />
                    <br />

                    <label for="Compute Interest"></label>
                    <button type="submit">Compute Interest</button>
                    <br />
                    <br />
                    <span id="result"></span>
                    <br />
                    <br />
                </form>
                <br />
                <br />

                <footer>
                    &#169; Everyone Can get Rich.<br />This Calculator belongs to
                </footer>
                </div>
            </body>
            </html>
                <script>
            let principalEl = document.querySelector("#principal");
            let rateEl = document.querySelector("#rate");
            let rateOutputEl = document.querySelector("#rate_val");
            let yearsEl = document.querySelector("#years");
            let formEl = document.querySelector("#form1");
            let result = document.querySelector("#result");

            formEl.addEventListener("submit", (e) => {
                e.preventDefault();

                if (!checkData()) return;

                let principal = principalEl.value;
                let rate = rateEl.value;
                let year = yearsEl.value;

                let interest = (principal * year * rate) / 100;
                let amount = parseFloat(principal) + parseFloat(interest);

                let endYear = new Date().getFullYear() + parseInt(years.value);

                result.innerHTML = `If you deposit ${principal},<br \>at an interest rate of ${rate}%<br \>You will receive an amount of ${amount},<br \>in the year ${endYear}<br \>`;
            });

            rateEl.addEventListener("input", (e) => {
                rateOutputEl.textContent = e.target.value + "%";
            });
            function checkData() {
                let principal = principalEl.value;
                if (!principal || parseFloat(principal) < 0) {
                alert("Enter a positive number");
                principalEl.focus();
                return false;
                }

                return true;
            }
            </script>

Please refer this code, don't use value for declared variables in script. You have used years named variable but actual variable name is year only. NaN is not a number error because of years value only. — Dnyaneshwar Suryawanshi, Oct 05 '22 at 17:26

How do I get my javascript code to calculate the numbers and not return undefined or Nan?

2 Answers2