Reputation: 55

Javascript Function Returning NaN

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>

Upvotes: 0

Answers (3)

owais shahab

Reputation: 44

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

Upvotes: 0

Pramod Kharade

Reputation: 2085

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

Upvotes: 0

PatricNox

Reputation: 3918

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

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);
}

Upvotes: 4

Javascript Function Returning NaN

Answers (3)

Related Questions