我怎样才能使用按钮进行加、乘和减

Question

当我单击程序中的按钮时，它们会记录在控制台中，但是如果我想添加这些数字，我该如何将它们放在一起？因此，如果我按 1+5，然后按等号按钮，它就会弹出： 1 + 5 =那么我怎样才能得到 6 或任何其他计算结果。我还想知道按下数字时如何在黑匣子（输入/屏幕）中显示数字。//Changing colors of operation colors //Multiply Colorconst colorMultiply = document.getElementById('multiply')colorMultiply.style.backgroundColor = "green"//Divide Colorconst colorDivide = document.getElementById('divide')colorDivide.style.backgroundColor = "red"//subtract colorconst colorSubtract = document.getElementById('subtract')colorSubtract.style.backgroundColor="blue"//add colorconst colorAdd = document.getElementById('add')colorAdd.style.backgroundColor="yellow"//change font of numbers to blue (I did it like this incase anyone wants to color of a single number)//Makes it easierconst number1 = document.getElementById('number1')number1.style.color="blue"const number2 = document.getElementById('number2')number2.style.color="blue"const number3 = document.getElementById('number3')number3.style.color="blue"const number4 = document.getElementById('number4')number4.style.color="blue"const number5 = document.getElementById('number5')number5.style.color="blue"const number6 = document.getElementById('number6')number6.style.color="blue"const number7 = document.getElementById('number7')number7.style.color="blue"const number8 = document.getElementById('number8')number8.style.color="blue"const number9 = document.getElementById('number9')number9.style.color="blue"const number0 = document.getElementById('number0')number0.style.color="blue"const decimal = document.getElementById('decimal')decimal.style.color="blue"//Changing color of the clear buttonconst clear = document.getElementById('clear')clear.style.color="white"clear.style.backgroundColor="black"  }}

Answer 1

您可以使用 eval() 方法来计算表达式，但请记住，使用 eval() 存在安全风险 - 切勿尝试计算代码或可能来自应用程序外部的值。

在下面的代码中，我使用了一个数组来跟踪所有单击的参数。当用户单击 = 时，数组将连接成字符串并进行计算。您可能还想添加一些检查以确保表达式有效，例如在计算之前使用 for 循环进行验证。

测试并运行如下：

//Changing colors of operation colors 

//Multiply Color

const colorMultiply = document.getElementById('multiply')

colorMultiply.style.backgroundColor = "green"

//Divide Color

const colorDivide = document.getElementById('divide')

colorDivide.style.backgroundColor = "red"

//subtract color

const colorSubtract = document.getElementById('subtract')

colorSubtract.style.backgroundColor="blue"

//add color

const colorAdd = document.getElementById('add')

colorAdd.style.backgroundColor="yellow"

//change font of numbers to blue (I did it like this incase anyone wants to color of a single number)

//Makes it easier

const number1 = document.getElementById('number1')

number1.style.color="blue"

const number2 = document.getElementById('number2')

number2.style.color="blue"

const number3 = document.getElementById('number3')

number3.style.color="blue"

const number4 = document.getElementById('number4')

number4.style.color="blue"

const number5 = document.getElementById('number5')

number5.style.color="blue"

const number6 = document.getElementById('number6')

number6.style.color="blue"

const number7 = document.getElementById('number7')

number7.style.color="blue"

const number8 = document.getElementById('number8')

number8.style.color="blue"

const number9 = document.getElementById('number9')

number9.style.color="blue"

const number0 = document.getElementById('number0')

number0.style.color="blue"

const decimal = document.getElementById('decimal')

decimal.style.color="blue"

//Changing color of the clear button

const clear = document.getElementById('clear')

clear.style.color="white"

clear.style.backgroundColor="black"

///////////////////////////////////////////////////////////////////////////////////////////////////////

// Then we want to insert `memoryStoreButton` before the `clear` button:

var memoryStoreButton = document.createElement("BUTTON");

memoryStoreButton.innerHTML = "MS";

clear.before(memoryStoreButton); //puts button before clear

// Then we want the `memoryClearButton` before `memoryStoreButton`

var memoryClearButton = document.createElement("BUTTON");

memoryClearButton.innerHTML = "MC";

memoryStoreButton.before(memoryClearButton);//puts button before clear

// and finally, the `memoryRestoreButton` before `memoryClearButton`

var memoryRestoreButton = document.createElement("BUTTON");

memoryRestoreButton.innerHTML = "MR";

memoryClearButton.before(memoryRestoreButton);//puts button before clear

///////////////////////////////////////////////////////////////////////////////////////////////////////////

//What numbers are pressed

var expression = [];

document.querySelector(".buttons8").onclick = function(e) {

  if(e.target.nodeName === "BUTTON") {

    if(e.target.innerHTML !== "=") {

      expression.push(e.target.innerHTML);

    } else {

      console.log( eval(expression.join("")) );

      expression = [];

    }

  }

}

*{

 margin: 0;

 padding: 0;

 box-sizing: border-box;

}

body{

 min-height: 100vh;

 display: flex;

 align-items: center;

 justify-content: center;

}

.calculator8{

 flex: 0 0 40%;

}

.screen8{

 width: 100%;

 font-size: 7rem;

 padding: 0.5rem;

 background: rgb(41,41,56);

 color: white;

 border:none;

}

.buttons8{

 display: flex;

 flex-wrap: wrap;

 transition: all 0.5s linear;

}

button{

 flex:0 0 25%;

 border: 1px solid black;

 padding: 0.25rem 0;

 transition: all 2s ease;

}

.btn-grey{

 background: rgb(224,224,224);

}

.btn8{

 font-size: 4rem;

}

<section class="calculator8">

  <h1> Calculator 8 </h1>

  <form>

   <input type="text" name="" id="numberBox" class="screen8">

  </form>

  <div class="buttons8"> 

   <!-- operation buttons -->

   <button id="multiply" type="button" class="btn8 btn-mul" data-num="*">*</button>

   <button id="divide" type="button" class="btn8 btn-div" data-num="/">/</button>

   <button id="subtract" type="button" class="btn8 btn-sub" data-num="-">-</button>

   <button id="add" type="button" class="btn8 btn-add" data-num="+">+</button>

   <!-- number buttons -->

   <button id="decimal" type="button" class="btn8 btn-grey" data-num=".">.</button>

   <button id="number9" type="button" class="btn8 btn-grey" data-num="9">9</button>

   <button id="number8" type="button" class="btn8 btn-grey" data-num="8">8</button>

   <button id="number7" type="button" class="btn8 btn-grey" data-num="7">7</button>

   <button id="number6" type="button" class="btn8 btn-grey" data-num="6">6</button>

   <button id="number5" type="button" class="btn8 btn-grey" data-num="5">5</button>

   <button id="number4" type="button" class="btn8 btn-grey" data-num="4">4</button>

   <button id="number3" type="button" class="btn8 btn-grey" data-num="3">3</button>

   <button id="number2" type="button" class="btn8 btn-grey" data-num="2">2</button>

   <button id="number1" type="button" class="btn8 btn-grey" data-num="1">1</button>

   <button id="number0" type="button" class="btn8 btn-grey" data-num="0">0</button>

   <button id="equals" type="button" class="btn8 btn-grey">=</button>

   <button id="clear" type="button" class="btn8 btn-grey">C</button>

</div>

 </section>