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
– famenev, Commented Sep 18, 2020 at 13:33
Ok, I've made the changes but my function doesn't work at all. I'm not sure why — Anon2945
– Anon2945, Commented Sep 18, 2020 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
– 3limin4t0r, Commented Sep 18, 2020 at 13:42

PatricNox · Accepted Answer · 2020-09-18 13:37:26Z

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, 2020 at 13:37

PatricNox

4,0382 gold badges20 silver badges30 bronze badges

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

6 Comments

Anon2945 Over a year ago

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

Jamiec Over a year ago

@Anon2945 stackoverflow.com/questions/32300649/…

PatricNox Over a year ago

@Anon2945 it refreshes per default since you have a button inside an <form> element.

Anon2945 Over a year ago

Ahhh, makes sense. Thanks!

3limin4t0r Over a year ago

You can omit event.preventDefault() if you set the <button type="button" otherwise it defaults to a type="submit". When using "button": "The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur." MDN <button>

|

Pramod Kharade · Accepted Answer · 2020-09-18 13:52:46Z

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

owais shahab · Accepted Answer · 2020-09-18 14:05:34Z

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

Collectives™ on Stack Overflow

Javascript Function Returning NaN

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related