HTML, JS calculator output number as NaN-CodePudding

I was trying to create a simple demo calculator and I got the output as NaN. I think it is something with the JS calling the input values. Please refer to the below code.

var num1 = document.getElementsByName(firstNoInput).value;
var num2 = document.getElementsByName(secondNoInput).value;
var ans;

function addition() {
  ans = num1   num2;
  document.getElementById("screen").innerHTML = ans;
}

function subtraction() {
  ans = num1 - num2;
  document.getElementById("screen").innerHTML = ans;
}

function multiplication() {
  ans = num1 * num2;
  document.getElementById("screen").innerHTML = ans;
}

function division() {
  ans = num1 / num2;
  document.getElementById("screen").innerHTML = ans;
}

<!DOCTYPE html>
<html>

<head>
  <title>Calculator</title>
</head>

<body>
  <div>
    <header id="screen"></header>
    <table>
      <tbody>
        <tr>
          <td>First Number:</td>
          <td name="firstNoInput"><input type="text" /></td>
        </tr>
        <tr>
          <td>Second Number:</td>
          <td name="secondNoInput"><input type="text" /></td>
        </tr>
        <tr>
          <td><button type="submit" onclick="addition()"> </button></td>
          <td><button type="submit" onclick="subtraction()">-</button></td>
        </tr>
        <tr>
          <td><button type="submit" onclick="multiplication()">*</button></td>
          <td><button type="submit" onclick="division()">/</button></td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html>

I even used the following code (convert values into strings), but it didn't work.

var num1 = parseInt(document.getElementsByName(firstNoInput).value);
var num2 = parseInt(document.getElementsByName(secondNoInput).value);

Can anyone help?

CodePudding user response：

var num1 = document.getElementsByName(firstNoInput).value;
var num2 = document.getElementsByName(secondNoInput).value;

is wrong. You should pass the parameters as strings. However, ignore this part, since the both variables that you define make only sense if your input fields already have values when the page gets loaded. Since you do not have these values, you will need a key listener that gets you the values whenever the user types.

Also, as described in the comments, getElementsByName() returns a NodeList and not an element.

let num1;
let num2;
document.getElementsByName('firstNoInput')[0].addEventListener('keyup', (e) => {
  num1 = e.target.value;
});
document.getElementsByName('secondNoInput')[0].addEventListener('keyup', (e) => {
  num2 = e.target.value;
});


function addition() {
  ans = Number(num1)   Number(num2);
  document.getElementById("screen").innerHTML = ans;
}

function subtraction() {
  ans = Number(num1) - Number(num2);
  document.getElementById("screen").innerHTML = ans;
}

function multiplication() {
  ans = Number(num1) * Number(num2);
  document.getElementById("screen").innerHTML = ans;
}

function division() {
  ans = Number(num1) / Number(num2);
  document.getElementById("screen").innerHTML = ans;
}

<header id="screen"></header>
<table>
  <tbody>
    <tr>
      <td>First Number:</td>
      <td name="firstNoInput"><input type="text" /></td>
    </tr>
    <tr>
      <td>Second Number:</td>
      <td name="secondNoInput"><input type="text" /></td>
    </tr>
    <tr>
      <td><button type="submit" onclick="addition()"> </button></td>
      <td><button type="submit" onclick="subtraction()">-</button></td>
    </tr>
    <tr>
      <td><button type="submit" onclick="multiplication()">*</button></td>
      <td><button type="submit" onclick="division()">/</button></td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Your var num1 and num2 are being set only when you start the script. Since it looks like you would like to use those as variables for your calculations, we can use a getter function.

And you can use a setter function on the output.

// var num1 = document.getElementsByName(firstNoInput).value; 
// not the input! this is the td element.
// var num2 = document.getElementsByName(secondNoInput).value;

var num1 = { get value() { 
   return (document.getElementById("number1").value * 1); 
   // note multiply by 1 to make typeof number.
} };
var num2 = { get value() { 
   return (document.getElementById("number2").value * 1); 
   // note multiply by 1 to make typeof number.
} };

var ans = { set value(z) {        
   document.getElementById("answer").innerHTML = z} 
};



function addition() {
  ans.value = num1.value   num2.value;
  // note num1.value and num2.value must be typeof number.
}

function subtraction() {
  ans.value = num1.value - num2.value;
}

function multiplication() {
  ans.value = num1.value * num2.value;
}

function division() {
  ans.value = num1.value / num2.value;
}

<!DOCTYPE html>
<html>

<head>
  <title>Calculator</title>
</head>

<body>
  <div>
    <header id="screen"></header>
    <table>
      <tbody>
        <tr>
          <td>First Number:</td>
          <td name="firstNoInput"><input id="number1" type="text" value=""/></td>
        </tr>
        <tr>
          <td>Second Number:</td>
          <td name="secondNoInput"><input id="number2" type="text" value="" /></td>
        </tr>
        <tr>
          <td>Answer</td>
          <td id="answer"></td>
        </tr>  
        <tr>
          <td><button type="submit" onclick="addition()"> </button></td>
          <td><button type="submit" onclick="subtraction()">-</button></td>
        </tr>
        <tr>
          <td><button type="submit" onclick="multiplication()">*</button></td>
          <td><button type="submit" onclick="division()">/</button></td>
        </tr>
      </tbody>
    </table>
  </div>
  </body>