Calculator with some Button in JavaScript

Question

I want to make a Calculator in JS. I'm new to JS and I don't get it why it isn't working. In the Browser Console I get undefined if I call add().
getInputAsNumber(...) should retrieves the input value from the field with the ID passed as Parameter writeResult() writes the calculated result to the output field and is used in all operations

"use strict";

function add() {
  let operator1;
  let operator2;
  getInputAsNumber(operator1, operator2);
  let summe = operator1 + operator2;
  writeResult(summe);
}

function getInputAsNumber(op1, op2) {

  op1 = document.getElementById("op1").value;
  op2 = document.getElementById("op2").value;
}

function writeResult(result) {
  let outputElement = document.getElementById("output1");
  outputElement.innerHTML = Number.result;
}

<form>
  <h1>Calculator with Buttons</h1>
  <label>Operand 1:</label>
  <input id="op1" type="number">
  <br>
  <br>
  <label>Operand 2:</label>
  <input id="op2" type="number">
  <br>
  <br>
  <label>Operators: </label>
  <button>+</button>
  <button>-</button>
  <button>*</button>
  <button>/</button>
  <br>
  <br>
  <div id="result">
    <label>Result: </label>
    <output id="output1"></output>
  </div>

</form>

Look at https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language - your code is assuming that op1 and op2 are passed by reference... — Jay Buckman, Oct 03 '22 at 15:00

Fatorice · Answer 1 · 2022-10-03T15:25:24.640

You are passing op1 and op2 as a referenced parameter, but they are actually called by value (which means, that they aren't changed when changing inside of the function). You get undefined because operator1 and operator2 are only declared (not initialized!).

You can modify your function so that it returns both operators (instead of passing them):

function add() {
  let {operator1, operator2} = getInputAsNumber();
  let summe = operator1 + operator2;
  writeResult(summe);
}

function getInputAsNumber() {
  const op1 = document.getElementById("op1").value;
  const op2 = document.getElementById("op2").value;
  return {operator1: parseFloat(op1), operator2: parseFloat(op2)};
}

function writeResult(result) {
  let outputElement = document.getElementById("output1");
  outputElement.innerHTML = result;
}

<h1>Calculator with Buttons</h1>
<label>Operand 1:</label>
<input id="op1" type="number">
<br>
<br>
<label>Operand 2:</label>
<input id="op2" type="number">
<br>
<br>
<label>Operators: </label>
<button onClick="add()">+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<br>
<br>
<div id="result">
  <label>Result: </label>
  <output id="output1"></output>
</div>

This function returns an object consisting of operator1 and 2 and using the object unwrapping (left side of the getInputAsNumber call) you can easily fetch the two values. Additionally: just reading the values of the input field (.value) retrieves a string (!), adding two strings in JavaScript means concatination ("2" + "2" = "22"), so you need to parse them first.

score 0 · Answer 2 · answered Oct 03 '22 at 16:09

The main issues I can see with your code is that:

you need to either pass op1 and op2 more directly, or [as below] set them globally so that they don't need to be passed at all
you can just use result, not Number.result [why the Number. in the first place?]
you might need to parse the inputs from string to number using parseInt Then, if you add onclick attributes to your buttons or use enventListener, you can make the calculator work fully

"use strict";

var operator1;
var operator2;

function calcOp(operator) {
  getInputAsNumber();
  var op;
  if (operator == 'add') {
    writeResult(operator1 + operator2);
  } else if (operator == 'sub') {
    writeResult(operator1 - operator2);
  } else if (operator == 'mul') {
    writeResult(operator1 * operator2);
  } else if (operator == 'div') {
    writeResult(operator1 / operator2);
  }
}

function getInputAsNumber() {
  operator1 = parseInt(document.getElementById("op1").value);
  operator2 = parseInt(document.getElementById("op2").value);
}

function writeResult(result) {
  let outputElement = document.getElementById("output1x");
  outputElement.value = result;
}

<h1>Calculator with Buttons</h1>
<label>Operand 1:</label>
<input id="op1" type="number">
<br>
<br>
<label>Operand 2:</label>
<input id="op2" type="number">
<br>
<br>
<label>Operators: </label>
<button onclick="calcOp('add');">+</button>
<button onclick="calcOp('sub');">-</button>
<button onclick="calcOp('mul');">*</button>
<button onclick="calcOp('div');">/</button>
<br>
<br>
<div id="result"><label>Result: </label><output id="output1x"></output></div>

I changed your add function to calcOp because all the operations would have very similar, but if you just wanted to have add :

function add() {
    getInputAsNumber();
    let summe = operator1 + operator2;
    writeResult(summe);
}

[Also, as one of the comments mentioned, if you wrap it as a form the way you did, it will likely disappear after any operation. Just div will look the same and not disappear]

Calculator with some Button in JavaScript

2 Answers2