Html Question posted in
Some basic documentation can be found here.

“Why can’t HTML read the value of an input?”

I am a newbie in JavaScript and I was learning to create a simple calculator using JavaScript and HTML.

I have two inputs Fld1 and Fld2. When I enter values in the input, it should be added up. But when I am calling the values in JavaScript, it returns ‘NaN’ for both inputs even if I have parsed them into numbers.

<input type="number" name="NumberField1" id="Fld1" placeholder="0" required>
<input type="number" name="NumberField2" id="Fld2" placeholder="0" required>

let num1 = parseFloat(document.getElementById("Fld1").value);
let num2 = parseFloat(document.getElementById("Fld2").value);
let output = num1 + num2;

I want the output to be the sum of num1 and num2.

What am I doing wrong? What should I try? Please help me…

I tried adding a default value tag in it value="0". But when I am doing so, the value is 0 even if I am entering a different number.

<input type="number" name="NumberField1" id="Fld1" value="0" placeholder="0" required>
<input type="number" name="NumberField2" id="Fld2" value="0" placeholder="0" required>

I even tried changing the input type, removing the placeholder and changing the value to 0 onfocus="this.value = '';. Nothing worked!

Help me out!

Full Code

    <body>
        <main>
            <h1>Calculator</h1>
                <div id="right">
                    <div class="inner">
                        <div id="inputs">
                            <input type="number" name="NumberField1" 
    id="Fld1" placeholder="0" required>
                            <input type="number" name="NumberField2" 
    id="Fld2" placeholder="0" required>
                        </div>
                        <button id="equals" 
    onclick="Submit()">&equals;</button>
                        <div id="output">
                            <hr>
                            <span>0</span>
                        </div>
                    </div>
                </div>
            </div>
        </main>


        <script>
            let num1 = parseFloat(document.getElementById("Fld1").value);
            let num2 = parseFloat(document.getElementById("Fld2").value);
            function Submit() {
              document.querySelector("#output > span").innerHTML = num1 + num2;
            }
        </script>
    </body>
Tags:

2

Answers


  1. 0

    This is because the script runs before the change of the input values.
    Move the calculation into the Submit function

            <body>
        <main>
            <h1>Calculator</h1>
                <div id="right">
                    <div class="inner">
                        <div id="inputs">
                            <input type="number" name="NumberField1" 
    id="Fld1" placeholder="0" required>
                            <input type="number" name="NumberField2" 
    id="Fld2" placeholder="0" required>
                        </div>
                        <button id="equals" 
    onclick="Submit()">&equals;</button>
                        <div id="output">
                            <hr>
                            <span>0</span>
                        </div>
                    </div>
                </div>
            </div>
        </main>


        <script>
            function Submit() {
            let num1 = parseFloat(document.getElementById("Fld1").value);
            let num2 = parseFloat(document.getElementById("Fld2").value);
              document.querySelector("#output > span").innerHTML = num1 + num2;
            }
        </script>
    </body>
    Login or Signup to reply.
  2. 0

    Because value of variable only update once at the time of page load. it should be update every time when you invoke submit button. move below lines inside the submit button

    let num1 = parseFloat(document.getElementById("Fld1").value);
let num2 = parseFloat(document.getElementById("Fld2").value);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search