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

Question

当我单击程序中的按钮时，它们会记录在控制台中，但是如果我想添加这些数字，我该如何将它们放在一起？因此，如果我按 1+5，然后按等号按钮，它就会弹出： 1 + 5 =

那么我怎样才能得到 6 或任何其他计算结果。

我还想知道按下数字时如何在黑匣子（输入/屏幕）中显示数字。

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

  }

}

Answer 1

您可以使用 eval() 方法来计算表达式，但请记住，使用 eval() 存在安全风险 - 切勿尝试计算代码或可能来自应用程序外部的值。在下面的代码中，我使用了一个数组来跟踪所有单击的参数。当用户单击 = 时，数组将连接成字符串并进行计算。您可能还想添加一些检查以确保表达式有效，例如在计算之前使用 for 循环进行验证。测试并运行如下：//Changing colors of operation colors&nbsp;//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"///////////////////////////////////////////////////////////////////////////////////////////////////////// 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 pressedvar expression = [];document.querySelector(".buttons8").onclick = function(e) {&nbsp; if(e.target.nodeName === "BUTTON") {&nbsp; &nbsp; if(e.target.innerHTML !== "=") {&nbsp; &nbsp; &nbsp; expression.push(e.target.innerHTML);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; console.log( eval(expression.join("")) );&nbsp; &nbsp; &nbsp; expression = [];&nbsp; &nbsp; }&nbsp; }}*{&nbsp;margin: 0;&nbsp;padding: 0;&nbsp;box-sizing: border-box;}body{&nbsp;min-height: 100vh;&nbsp;display: flex;&nbsp;align-items: center;&nbsp;justify-content: center;}.calculator8{&nbsp;flex: 0 0 40%;}.screen8{&nbsp;width: 100%;&nbsp;font-size: 7rem;&nbsp;padding: 0.5rem;&nbsp;background: rgb(41,41,56);&nbsp;color: white;&nbsp;border:none;}.buttons8{&nbsp;display: flex;&nbsp;flex-wrap: wrap;&nbsp;transition: all 0.5s linear;}button{&nbsp;flex:0 0 25%;&nbsp;border: 1px solid black;&nbsp;padding: 0.25rem 0;&nbsp;transition: all 2s ease;}.btn-grey{&nbsp;background: rgb(224,224,224);}.btn8{&nbsp;font-size: 4rem;}<section class="calculator8">&nbsp; <h1> Calculator 8 </h1>&nbsp; <form>&nbsp; &nbsp;<input type="text" name="" id="numberBox" class="screen8">&nbsp; </form>&nbsp; <div class="buttons8">&nbsp;&nbsp; &nbsp;<!-- operation buttons -->&nbsp; &nbsp;<button id="multiply" type="button" class="btn8 btn-mul" data-num="*">*</button>&nbsp; &nbsp;<button id="divide" type="button" class="btn8 btn-div" data-num="/">/</button>&nbsp; &nbsp;<button id="subtract" type="button" class="btn8 btn-sub" data-num="-">-</button>&nbsp; &nbsp;<button id="add" type="button" class="btn8 btn-add" data-num="+">+</button>&nbsp; &nbsp;<!-- number buttons -->&nbsp; &nbsp;<button id="decimal" type="button" class="btn8 btn-grey" data-num=".">.</button>&nbsp; &nbsp;<button id="number9" type="button" class="btn8 btn-grey" data-num="9">9</button>&nbsp; &nbsp;<button id="number8" type="button" class="btn8 btn-grey" data-num="8">8</button>&nbsp; &nbsp;<button id="number7" type="button" class="btn8 btn-grey" data-num="7">7</button>&nbsp; &nbsp;<button id="number6" type="button" class="btn8 btn-grey" data-num="6">6</button>&nbsp; &nbsp;<button id="number5" type="button" class="btn8 btn-grey" data-num="5">5</button>&nbsp; &nbsp;<button id="number4" type="button" class="btn8 btn-grey" data-num="4">4</button>&nbsp; &nbsp;<button id="number3" type="button" class="btn8 btn-grey" data-num="3">3</button>&nbsp; &nbsp;<button id="number2" type="button" class="btn8 btn-grey" data-num="2">2</button>&nbsp; &nbsp;<button id="number1" type="button" class="btn8 btn-grey" data-num="1">1</button>&nbsp; &nbsp;<button id="number0" type="button" class="btn8 btn-grey" data-num="0">0</button>&nbsp; &nbsp;<button id="equals" type="button" class="btn8 btn-grey">=</button>&nbsp; &nbsp;<button id="clear" type="button" class="btn8 btn-grey">C</button></div>&nbsp;</section>