callback

by qwerew0

HTML

<input readonly id="operator">
  <input readonly type="number" id="result">
  <div class="row">
    <button id="num-7">7</button>
    <button id="num-8">8</button>
    <button id="num-9">9</button>
    <button id="plus">+</button>
  </div>
  <div class="row">
    <button id="num-4">4</button>
    <button id="num-5">5</button>
    <button id="num-6">6</button>
    <button id="minus">-</button>
  </div>
  <div class="row">
    <button id="num-1">1</button>
    <button id="num-2">2</button>
    <button id="num-3">3</button>
    <button id="divide">/</button>
  </div>
  <div class="row">
    <button id="clear">C</button>
    <button id="num-0">0</button>
    <button id="calculate">=</button>
    <button id="multiply">x</button>
  </div>

CSS

* { box-sizing: border-box }
    #result { width: 180px; height: 50px; margin: 5px; text-align: right }
    #operator { width: 50px; height: 50px; margin: 5px; text-align: center }
    button { width: 50px; height: 50px; margin: 5px }

JavaScript

let _numOne = "";
let _operator = "";
let _numTwo = "";
const operator = document.querySelector("#operator");
const result = document.querySelector("#result");
const onClickNum = function (n) {
	return function () {
		if (!_operator) {
			_numOne += n;
		} else {
			_numTwo += n;
		}
		result.value += number;
	};

/* 
	return () => {
		if (!_operator) {
			_numOne += n;
		} else {
			_numTwo += n;
		}
		result.value += number;
	}; 
*/


};

document.querySelector("#num-0").addEventListener("click", onClickNum("0"));
document.querySelector("#num-1").addEventListener("click", onClickNum("1"));
document.querySelector("#num-2").addEventListener("click", onClickNum("2"));
document.querySelector("#num-3").addEventListener("click", onClickNum("3"));
document.querySelector("#num-4").addEventListener("click", onClickNum("4"));
document.querySelector("#num-5").addEventListener("click", onClickNum("5"));
document.querySelector("#num-6").addEventListener("click", onClickNum("6"));
document.querySelector("#num-7").addEventListener("click", onClickNum("7"));
document.querySelector("#num-8").addEventListener("click", onClickNum("8"));
document.querySelector("#num-9").addEventListener("click", onClickNum("9"));

document.querySelector("#plus").addEventListener("click", function (n) {
	if (!_operator) {
		_numOne += "+";
	} else {
		_numTwo += "+";
	}
});
document.querySelector("#minus").addEventListener("click", function (n) {
	if (!_operator) {
		_numOne += "-";
	} else {
		_numTwo += "-";
	}
});
document.querySelector("#divide").addEventListener("click", function (n) {
	if (!_operator) {
		_numOne += "/";
	} else {
		_numTwo += "/";
	}
});
document.querySelector("#multiply").addEventListener("click", function (n) {
	if (!_operator) {
		_numOne += "*";
	} else {
		_numTwo += "*";
	}
});
document.querySelector("#calculate").addEventListener("click", function (n) {
	if (!_operator) {
		_numOne += "=";
	} else {
		_numTwo +=...