Question

我想制作一个计算器，但我不知道如何获得算术符号通过正确的方式，我得到了南，因为exapmle +不是一个数字，但我真的无法想象现在如何得到它或正确的方式... 我正在寻找简单的方法，只能使用javascript

＆＃13;

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;
	// }

}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您应该使用eval()函数从字符串中获取评估结果以下是文档链接：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

您不需要参数化所有按钮来执行操作，因为当您按＆＃34; =＆＃34;时会评估整个字符串。

以下是修改代码并添加clear功能后的工作代码段：

＆＃13;

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;
}

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

我希望它有所帮助。

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>

在javascript中的真实计算器

2 个答案: