javascript - javascript中的真实计算器

Question

我想做一个计算器，但我不知道如何求算术符号通过正确的方式，我得到 nan 因为例如 + 不是数字，但我现在真的无法想象如何通过正确的方式获得或制作它......我正在寻找简单的方法并且只使用 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

您应该使用 eval() 函数从字符串中获取计算结果。
这是文档的链接:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

您不需要对所有按钮进行参数化来执行操作，因为当您按下“=”时将评估整个字符串。

这是修改代码并添加 clear 功能后的工作片段:

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>

希望对你有帮助。