Javascript Function Returning NaN

Question

I'm making a calculator that will take inputs from a survey form and then push results to an object so I can display it on other parts of the site and use chart.js

However, I can't get the first calculation to work. My first function is to calculate the 30% saving of monthly gas spend (gas) and to subtract the saving from a monthly payment (price). I'm getting NaN in the console when the site loads even before clicking the button which has the eventlistener assigned to it.

Where am I going wrong?

P.S I haven't made the form responsive yet so it will need to be viewed in a full browser.

const calculate = document.getElementById('one');

calculate.addEventListener('click', calc());

function calc() {
    let gas = parseInt(document.getElementById('gas').value);
    let price = parseInt(document.getElementById('price').value);
    let gasSaving;
    let result;
    gasSaving = gas * 0.3;
    result = price - gasSaving;
    console.log(result);
}

/* Survery Section Start */

.survery {
    background-color: #1b262c;
    padding-bottom: 100px;
}

.survery-h1 {
    color: white;
    text-align: center;
    padding-top: 5rem;
}

input {
    text-indent: 10px;
}

.survery-questions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.home-name-footer {
    width: 600px;
    height: 45px;
    margin-bottom: 3em;
    margin-left: 90px;
    margin-right: 25px;
}

.home-phone-footer {
    height: 45px;
    margin-bottom: 3em;
    width: 600px;
    margin-left: 25px;
}

.home-email-footer {
    width: 600px;
    height: 45px;
    margin-bottom: 3em;
    margin-left: 90px;
    margin-right: 25px;
}

#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}

.btn-calc {
    padding: 1rem 2.5rem;
    width: 15rem;
    background-color: #168ecf;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    color: #eee;
    transition: all .5s;
    margin-bottom: 3rem;
    margin-top: 1rem;
    text-align: center;
}

<html>
<head>
</head>
<body>
    <!-- Survery Start -->
   <section class="survery">
       <div class="survery-title">
           <h1 class="survery-h1">Scrappage Payment Survey</h1>
       </div>
        <form action="">
        <div class="survery-questions">
                <div class="name-form">
                    <input type="text" placeholder="Gas Supplier" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input type="text" placeholder="Gas Meter Serial No." class="home-phone-footer" id="input" required>
                </div>
                
                <div class="email-form">
                    <input  placeholder="Monthly Gas Spend" class="home-email-footer" id="gas" required>
                </div>

                <div class="phone-form">
                    <input type="text" placeholder="System Monthly Payment" class="home-phone-footer" id="price" required>
                </div>

                <div class="name-form">
                    <input type="text" placeholder="Number Of Bathrooms" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input type="text" placeholder="Number Of Radiators" class="home-phone-footer" id="input" required>
                </div>

                <div class="name-form">
                    <input type="text" placeholder="System Size Required (Kw)" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input type="text" placeholder="Number Of Residents" class="home-phone-footer" id="input" required>
                </div>
                <div class="thebutton">
                    <button class="btn-calc" id="one">Calculate</button>
                
                </form>

            </div>
       </div>
   </section>
 <!-- Survery End-->
</body>
</html>

you shouldn't call the function calc while adding the eventListener:`calculate.addEventListener('click', calc);` — famenev, Sep 18 '20 at 13:33
Ok, I've made the changes but my function doesn't work at all. I'm not sure why — Anon2945, Sep 18 '20 at 13:35
@Anon2945 By removing the parentheses you register the function as event handler. You now have to click the calculate button to run your function. — 3limin4t0r, Sep 18 '20 at 13:42

score 4 · Answer 1 · answered Sep 18 '20 at 13:37

4

calculate.addEventListener('click', calc());

to

calculate.addEventListener('click', calc);

the calc() with parentheses will execute the function directly, whilst without it will only be called upon.

Also, you should add an event prevent default to not having the page refreshed.

const calculate = document.getElementById('one');

calculate.addEventListener('click', calc);

function calc(event) {

    // Prevent page refresh.
    event.preventDefault();

    let gas = parseInt(document.getElementById('gas').value);
    let price = parseInt(document.getElementById('price').value);
    let gasSaving;
    let result;
    gasSaving = gas * 0.3;
    result = price - gasSaving;
    console.log(result);
}

answered Sep 18 '20 at 13:37

PatricNox

3,306
1
17
25

Why does the page refresh in this example? Examples I've seen of simple calculators on youtube don't add the even.preventDefault(); Also, how can I round the result to 2 decimal places? Thanks – Anon2945 Sep 18 '20 at 13:42
@Anon2945 https://stackoverflow.com/questions/32300649/js-round-to-2-decimal-places – Jamiec Sep 18 '20 at 13:43
@Anon2945 it refreshes per default since you have a button inside an `
` element.
– PatricNox Sep 18 '20 at 13:45
Ahhh, makes sense. Thanks! – Anon2945 Sep 18 '20 at 13:56
You can omit `event.preventDefault()` if you set the ` – 3limin4t0r Sep 18 '20 at 13:59
I've added. toFixed(2) so I can get my result to 2 decimal places, but the input fields don't pick up the decimal places. So for example if I enter 35.86 for price, it will do the calulation based on 35 and not 35.86 – Anon2945 Sep 18 '20 at 14:18

score 0 · Answer 2 · answered Sep 18 '20 at 13:52

I have tried to solve the issue: Please check

const calculate = document.getElementById('one');

calculate.addEventListener('click', calc);

function calc() {
    let gas = parseInt(document.getElementById('gas').value);
    let price = parseInt(document.getElementById('price').value);
    let gasSaving;
    let result;
    gasSaving = gas * 0.3;
    result = price - gasSaving;
    console.log(result);
}

/* Survery Section Start */

.survery {
    background-color: #1b262c;
    padding-bottom: 100px;
}

.survery-h1 {
    color: white;
    text-align: center;
    padding-top: 5rem;
}

input {
    text-indent: 10px;
}

.survery-questions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.home-name-footer {
    width: 600px;
    height: 45px;
    margin-bottom: 3em;
    margin-left: 90px;
    margin-right: 25px;
}

.home-phone-footer {
    height: 45px;
    margin-bottom: 3em;
    width: 600px;
    margin-left: 25px;
}

.home-email-footer {
    width: 600px;
    height: 45px;
    margin-bottom: 3em;
    margin-left: 90px;
    margin-right: 25px;
}

#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}

.btn-calc {
    padding: 1rem 2.5rem;
    width: 15rem;
    background-color: #168ecf;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    color: #eee;
    transition: all .5s;
    margin-bottom: 3rem;
    margin-top: 1rem;
    text-align: center;
}

<html>
<head>
</head>
<body>
    <!-- Survery Start -->
   <section class="survery">
       <div class="survery-title">
           <h1 class="survery-h1">Scrappage Payment Survey</h1>
       </div>
        <form action="">
        <div class="survery-questions">
                <div class="name-form">
                    <input type="text" placeholder="Gas Supplier" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input type="text" placeholder="Gas Meter Serial No." class="home-phone-footer" id="input" required>
                </div>
                
                <div class="email-form">
                    <input  placeholder="Monthly Gas Spend" class="home-email-footer" id="gas" required>
                </div>

                <div class="phone-form">
                    <input type="text" placeholder="System Monthly Payment" class="home-phone-footer" id="price" required>
                </div>

                <div class="name-form">
                    <input type="text" placeholder="Number Of Bathrooms" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input type="text" placeholder="Number Of Radiators" class="home-phone-footer" id="input" required>
                </div>

                <div class="name-form">
                    <input type="text" placeholder="System Size Required (Kw)" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input type="text" placeholder="Number Of Residents" class="home-phone-footer" id="input" required>
                </div>
                <div class="thebutton">
                    <button class="btn-calc" id="one">Calculate</button>
                
                </form>

            </div>
       </div>
   </section>
 <!-- Survery End-->
</body>
</html>

Hope, it will help you

score 0 · Answer 3 · answered Sep 18 '20 at 14:05

Step #1 I added jquery reference in the head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Step #2 I added onclick event to call calc() function Calculate Step #3 I added this script now it's working fine

function calc() { debugger let gas = parseInt(document.getElementById('gas').value); let price = parseInt(document.getElementById('price').value); let gasSaving; let result; gasSaving = gas * 0.3; result = price - gasSaving; console.log(result); }

What I understand your are not properly calling the event that's why NAN(Not a Number) is appearing in the console and the second thing you asked in the comment about round off it is very simple https://www.w3schools.com/JSREF/jsref_round.asp please check this link it will help you

Javascript Function Returning NaN

3 Answers3