The calculator won't display the right results-CodePudding

I would like to ask a bit of help. I was creating a simple calculator. The problem is my calculator displays the same results everytime. The addition would display nothing, the subtraction and multiplication would display 0, and the division and modulo would display NaN. Here is my code:

let a = document.getElementById("num1").innerHTML;
let b = document.getElementById("num2").innerHTML;

function addFunction() {
  let add = a   b;
  document.getElementById("result").innerHTML = add;
}

function subtractFunction() {
  let subtract = a - b;
  document.getElementById("result").innerHTML = subtract;
}

function multiplyFunction() {
  let multiply = a * b;
  document.getElementById("result").innerHTML = multiply;
}

function divideFunction() {
  let divide = a / b;
  document.getElementById("result").innerHTML = divide;
}

function moduloFunction() {
  let modulo = a % b;
  document.getElementById("result").innerHTML = modulo;
}

<div >
  <h2>Simple Calculator</h2>
  <p>How to operate: Enter two numbers first in the textboxes. Next, press the button of the respective operand. Lastly, a result will come up under the calculator.</p>
  <input id="num1">
  <input id="num2">
  <br>
  <br>
  <button onclick="addFunction()"> </button>
  <button onclick="subtractFunction()">-</button>
  <button onclick="multiplyFunction()">*</button>
  <button onclick="divideFunction()">/</button>
  <button onclick="moduloFunction()">%</button>
  <p>Result: </p>
  <p id="result">
    <p>
</div>

CodePudding user response：

You should get values of input not innerHTML like this

var a = document.getElementById("num1").value
var b = document.getElementById("num2").value

And then convert it to number like this

a = parseFloat(a)
b = parseFloat(b)

CodePudding user response：

You need to do this:

let a = parseFloat(document.getElementById("num1").value);
let b = parseFloat(document.getElementById("num2").value);

CodePudding user response：

You need .value to get the text of the input field, this will return a string so you also need to use the Unary Plus ( ) to convert it to a number:

 document.getElementById("num1").value;
 document.getElementById("num2").value;

Since the content of both input boxes change throughout the program, you would need to run the lines above mulitple times to get the updated content. You can do this with functions:

function getA() {
  return  document.getElementById("num1").value;
}

function getB() {
  return  document.getElementById("num2").value;
}

To prevent the user from entering characters that aren't numbers you can also set the input type:

<input id="num1" type="number">
<input id="num2" type="number">

Full code:

<html>

<body>
  <div >
    <h2>Simple Calculator</h2>
    <p>How to operate: Enter two numbers first in the textboxes. Next, press the button of the respective operand. Lastly, a result will come up under the calculator.</p>
    <input id="num1" type="number">
    <input id="num2" type="number">
    </br>
    </br>
    <button onclick="addFunction()"> </button>
    <button onclick="subtractFunction()">-</button>
    <button onclick="multiplyFunction()">*</button>
    <button onclick="divideFunction()">/</button>
    <button onclick="moduloFunction()">%</button>
    <p>Result: </p>
    <p id="result">
      <p>
  </div>
  <script>
    function getA() {
      return  document.getElementById("num1").value;
    }

    function getB() {
      return  document.getElementById("num2").value;
    }

    function addFunction() {
      let add = getA()   getB();
      document.getElementById("result").innerHTML = add;
    }

    function subtractFunction() {
      let subtract = getA() - getB();
      document.getElementById("result").innerHTML = subtract;
    }

    function multiplyFunction() {
      let multiply = getA() * getB();
      document.getElementById("result").innerHTML = multiply;
    }

    function divideFunction() {
      let divide = getA() / getB();
      document.getElementById("result").innerHTML = divide;
    }

    function moduloFunction() {
      let modulo = getA() % getB();
      document.getElementById("result").innerHTML = modulo;
    }
  </script>
</body>

</html>