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>

- Marie

---

Takit Isy，是的，你稍微改了一下，起初有些地方写得不够好，但现在好多了）谢谢。我需要有人帮我解答一些问题，你觉得在stackoverflow上能帮到我吗？ - Marie

我相信只要你像这个问题一样提出好的问题，Stack Overflow社区一定会始终在那里帮助你。 :) - Takit Isy

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>

我希望可以帮到你。

- Takit Isy

Answer 2

我不知道你正在尝试什么... x和y变量在开始时被设置了多次（在for循环内），之后就没有改变过。

这个版本有点可行...但它离一个完整的计算器还有很远的距离，这将远远超出一个问题的范围。

只需按1+2=键

...或2*456-123=

...或7*3/2=

...或任何你想要的

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

function getResult() {
 result.value = eval(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" value="C">C</button>
</div>

- raul.vila