Real calculator in javascript

Question

i want to make a calculator, but i do not know how to get arithmetic signs by right way, i get nan because for exapmle + is not a number, but i really can not imagine now how to get it or make it by right way... I am looking for easy way and only with javascript

var num = document.getElementsByTagName("button");
for( var i = 0; i < num.length; i++ ){
	num[i].addEventListener("click", getNum);
	 var x = Number(num[i].value);
     var y = Number(num[i].value);
}
var result = document.getElementById("result");
var numsRes = document.getElementById("numsRes");
numsRes.addEventListener("click", getResult)

var plus = document.getElementById("plus");


function getResult(){
	// if(  )
	result.value = parseInt(x) + parseInt(y);

}


function getNum(){
	result.value += this.value;
	


	// if( this.value == "+" ){
	// 	result.value += this.value;
	// }

}

button{
  width: 30px;
  height: 30px;
  margin: 5px 0;
}
#result{
  width: 130px;
  height: 30px;
  display: block;
}

<div id="calculator">
  <input id="result">
  <button type="button" value="0">0</button>
  <button type="button" value="1">1</button>
  <button type="button" value="2">2</button>
  <button type="button" value="3">3</button>
  <br>
  <button type="button" value="4">4</button>
  <button type="button" value="5">5</button>
  <button type="button" value="6">6</button>
  <button type="button" value="7">7</button>
  <br>
  <button type="button" value="8">8</button>
  <button type="button" value="9">9</button>
  <button type="button" value="-">-</button>
  <button type="button" id="plus" value="+">+</button>
  <br>
  <button type="button" value="*">*</button>
  <button type="button" value="/">/</button>
  <button type="button" id="numsRes" value="=">=</button>
  <button type="button" value="C">C</button>
</div>

Answer 1

You should use the eval() function to get the evaluated result from a string.
Here is a link for documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

You won't need all the buttons to be parameterized to do things, as the whole string will be evaluated when you'll press "=".

Here is a working snippet after modifying your code, and adding the clear functionnality:

var result = document.getElementById("result");
var num = document.getElementsByTagName("button");
for (var i = 0; i < num.length; i++) {
  num[i].addEventListener("click", getNum);
  // Deleted x and y vars, not used now !
}

var numsRes = document.getElementById("numsRes");
numsRes.addEventListener("click", getResult);

// Added clear binding
var clearBtn = document.getElementById("clear");
clearBtn.addEventListener("click", clearRes);

function getResult() {
  // Modified to add "eval()"
  result.value = eval(result.value);
}

// Added clear function
function clearRes() {
  result.value = '';
}

function getNum() {
  result.value += this.value;
}

button {
  width: 30px;
  height: 30px;
  margin: 5px 0;
}

#result {
  width: 130px;
  height: 30px;
  display: block;
}

<div id="calculator">
  <input id="result">
  <button type="button" value="0">0</button>
  <button type="button" value="1">1</button>
  <button type="button" value="2">2</button>
  <button type="button" value="3">3</button>
  <br>
  <button type="button" value="4">4</button>
  <button type="button" value="5">5</button>
  <button type="button" value="6">6</button>
  <button type="button" value="7">7</button>
  <br>
  <button type="button" value="8">8</button>
  <button type="button" value="9">9</button>
  <button type="button" value="-">-</button>
  <button type="button" id="plus" value="+">+</button>
  <br>
  <button type="button" value="*">*</button>
  <button type="button" value="/">/</button>
  <button type="button" id="numsRes" value="">=</button>
  <button type="button" id="clear" value="">C</button>
  <!-- The 2 above values are "" to not add characters to the string to be evaluated -->
</div>

I hope it helps.