Why isn't my code adding a number with the input field (HTML/Javascript - Beginner)?

Question

for practice as a beginner I am trying to take a number from a text field, have the user press a button that adds 2 to that number, and then displays it through HTML. However, for some reason I keep getting NaN when applying the code below.

//Setup
var num1 = document.querySelector(".input-box").value;
var btn = document.querySelector(".btn");
//Add
var sum = parseInt(num1) + 2;

btn.addEventListener('click', (e) => {
 e.preventDefault();
 document.querySelector("#output").innerHTML = sum;
})

<html>
    <head>
        <title>Calculate</title>
        <style>

        </style>
    </head>
    <body>
        <div class="sign">
            <h1>Calculate</h1>
            <form>
                <input type="text" class="input-box" placeholder="Enter Number">
                <input class="btn" type="button" value="Add 2">
            </form>
            <h1 id="output"></h1>
        </div>

        <script src="manip3.js"></script>
    </body>
</html>

parseInt('') + 2 is NaN. You merely calculate sum once when the script gets loaded and not really on click. — Lain
– Lain, Commented Jul 1, 2020 at 1:11
Move your add functionality inside the event listener and also check if parseInt(value) !== NaN before adding 2. — Rosh
– Rosh, Commented Jul 1, 2020 at 1:16

Marik Ishtar · Accepted Answer · 2020-07-01 01:25:35Z

2

You need to move the num1 and sum the inside the event listener

//Setup

var btn = document.querySelector(".btn");
//Add


btn.addEventListener('click', (e) => {
 e.preventDefault();
 // get the number
 var num1 = document.querySelector(".input-box").value;
 // add 2
 var sum = parseInt(num1) + 2;
 document.querySelector("#output").innerHTML = sum;
})

<html>
    <head>
        <title>Calculate</title>
        <style>

        </style>
    </head>
    <body>
        <div class="sign">
            <h1>Calculate</h1>
            <form>
                <input type="text" class="input-box" placeholder="Enter Number">
                <input class="btn" type="button" value="Add 2">
            </form>
            <h1 id="output"></h1>
        </div>

        <script src="manip3.js"></script>
    </body>
</html>

answered Jul 1, 2020 at 1:25

Marik Ishtar

3,0691 gold badge17 silver badges29 bronze badges

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

Comments

Adam · Accepted Answer · 2020-07-01 01:25:19Z

1

You need to calculate the sum inside the click function. Right now it is calculating before the butten is clicked, when the page loads, which means the input is empty.

answered Jul 1, 2020 at 1:25

Adam

8024 silver badges11 bronze badges

Comments

Bryan Dellinger · Accepted Answer · 2020-07-01 01:31:34Z

1

as mentioned above you need to resolve after the button is clicked. you could change your variables to function variables.

//Setup
 var num1 = function() {return document.querySelector(".input-box").value};
 var btn = document.querySelector(".btn");
//Add
 var sum = function() {return parseInt(num1()) + 2};


btn.addEventListener('click', (e) => {
   e.preventDefault();
   document.querySelector("#output").innerHTML = sum();
 })

answered Jul 1, 2020 at 1:31

Bryan Dellinger

5,43210 gold badges40 silver badges90 bronze badges

Comments

Eissa Saber · Accepted Answer · 2020-07-01 05:51:36Z

make the input type = number for better validation

make the button type = submit cause this is form and you need to submit

add submit event to the form cause you can't prevent default without submit event

select input inside the event and convert its value to number by adding + before it

// select from
var form = document.getElementById("form");

form.addEventListener('submit', (e) => {
    e.preventDefault();
    // select input and convert its value to number
    var num1 = +document.querySelector(".input-box").value;
    document.querySelector("#output").innerHTML = num1 + 2;
    // wipe out form after submit
    form.reset();
});

<div class="sign">
    <h1>Calculate</h1>
    <form id="form">
        <input type="number" class="input-box" placeholder="Enter Number">
        <input class="btn" type="submit" value="Add 2">
    </form>
    <h1 id="output"></h1>
</div>

Collectives™ on Stack Overflow

Why isn't my code adding a number with the input field (HTML/Javascript - Beginner)?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related