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

Html – Difficulty in getting the output

Here is my Javascript file prompt.js:

let a = parseFloat(document.getElementById("num1").value);
let b = parseFloat(document.getElementById("num2").value);
function getSum() {
        var sum = a + b;
        document.getElementById("output").value = sum;

}
answerBtn.addEventListener('click', getSum);

and here is the corresponding html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
        <div>
            <label for="num1">Enter a number A: </label>
            <input type="text" id="num1" />
        </div>
        <div>
            <label for="num2"> Enter another number B: </label>
            <input type="text" id="num2" />
        </div>

        <input type="button" value="A + B" id = "answerBtn" >
        <br>

        <div>
            <input type="text" id="output" readonly/>
        </div>

    </form>
    <script src="interaction-simple.js" defer></script>
</body>

</html>

So there are two text fields in the page in which the user enters a number and the sum of the number is calculated upon clicking the button and the result is displayed in another text field just below the button.

When i enter the numbers the output is : NaN
in the output text field.
What’s wrong with my code?

Tags:

3

Answers


  1. 0

    If you declare the variables inside the getSum function they are populated when called rather than at page load, like so:

    function getSum() {
  let a = parseFloat(document.getElementById("num1").value);
  let b = parseFloat(document.getElementById("num2").value);
  
  var sum = a + b;
  document.getElementById("output").value = sum;
}
answerBtn.addEventListener('click', getSum);
    <form>
  <div>
    <label for="num1">Enter a number A: </label>
    <input type="text" id="num1" />
  </div>
  <div>
    <label for="num2"> Enter another number B: </label>
    <input type="text" id="num2" />
  </div>

  <input type="button" value="A + B" id="answerBtn">
  <br>

  <div>
    <input type="text" id="output" readonly/>
  </div>

</form>
    Login or Signup to reply.
  2. 0

    Your a and b variables are initialized before the data is actually provided to text field. So the right solution is to gather data when the event is emitted and not when page is loaded. You can use @Professor Abronsius’s code or alternativly you can define a and b as text fields and not their value, then inside the sum function access the data.

    let a = document.getElementById("num1");
let b = document.getElementById("num2");
function getSum() {
    let v1 = parseFloat(a.value)
    let v2 = parseFloat(b.value)
    var sum = v1 + v2;
    document.getElementById("output").value = sum;
}
answerBtn.addEventListener('click', getSum);
    Login or Signup to reply.
  3. 0

    Actually,
    Here is the issue in the script where you try to access the value of input fields.
    Just try to access the value of the input field with the click of the (CTA) button.
    Just refactored a bit & added handling for invalid inputs.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <form>
      <div>
        <label for="num1">Enter first Number: </label>
      </div>
      <input type="text" id="num1" />
      <div>
        <label for="num2"> Enter second number: </label>
      </div>
      <input type="text" id="num2" />
      <br />
      <br />
      <div>
        <input type="button" value="Evaluate" id="answerBtn" />
        <input type="text" id="output" readonly />
      </div>
    </form>
    <script>
      const firstInput = document.getElementById("num1");
      const secondInput = document.getElementById("num2");
      const submitButton = document.getElementById("answerBtn");
    
      function isInputValid(param) {
        return Boolean(param.value.length);
      }
    
      function getSum() {
        if (isInputValid(firstInput) && isInputValid(secondInput)) {
          const sum = parseFloat(firstInput.value) + parseFloat(secondInput.value);
          document.getElementById("output").value = sum;
          // Clear form once submit the form
          firstInput.value = "";
          secondInput.value = "";
        } else {
          alert("Please enter valid values.");
        }
      }
      submitButton.addEventListener("click", getSum);
    </script>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search