我已经获得了display.innerHTML来将操作数之前的数字存储为x,并存储操作数。我有点想让变量y等于在操作数之后输入的数字。我最好的猜测是某种循环这是代码:
<!--Coded by Brent-->
<html>
<!DOCTYPE HTML>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<head>
<title>Calculator v2.0</title>
<style>
body {
background: linear-gradient(blue 30%, black 50%, green 80%);
}
div.container {
background-color: #1de4fd;
border: 1px solid black;
height: 210px;
width: 195px;
}
div table tr td div {
background-color: white;
width: 180px;
height: 25px;
text-align: right;
}
button {
height: 40px;
width: 40px;
}
</style>
</head>
<body>
<div style="text-align: center;">
<div class="container">
<table align="center">
<tr>
<td colspan="4">
<div id="display"></div>
</td>
</tr>
<tr>
<td><button id="one" type="button">1</button></td>
<td><button id="two" type="button">2</button></td>
<td><button id="three" type="button">3</button></td>
<td><button id="divide" type="button">/</button></td>
</tr>
<tr>
<td><button id="four" type="button">4</button></td>
<td><button id="five" type="button">5</button></td>
<td><button id="six" type="button">6</button></td>
<td><button id="multiply" type="button">*</button></td>
</tr>
<tr>
<td><button id="seven" type="button">7</button></td>
<td><button id="eight" type="button">8</button></td>
<td><button id="nine" type="button">9</button></td>
<td><button id="subtract" type="button">-</button></td>
</tr>
<tr>
<td><button id="zero" type="button">0</button></td>
<td><button id="decimal" type="button">.</td>
<td><button id="add" type="button">+</button></td>
<td><button id="equal" type="button">=</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
var display = document.getElementById("display");
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var six = document.getElementById("six");
var seven = document.getElementById("seven");
var eight = document.getElementById("eight");
var nine = document.getElementById("nine");
var zero = document.getElementById("zero");
var decimal = document.getElementById("decimal");
var add = document.getElementById("add");
var subtract = document.getElementById("subtract");
var multiply = document.getElementById("multiply");
var divide = document.getElementById("divide");
var calculate = document.getElementById("equal");
var op = ""; //blank op variable to be filled in when an operation button is clicked
one.addEventListener("click", addOne);//Adding event to the button 1
function addOne() {
display.innerHTML += 1; //Makes the display equal to the display +1 at the end
}
two.addEventListener("click", addTwo);
function addTwo() {
display.innerHTML += 2;
}
three.addEventListener("click", addThree);
function addThree() {
display.innerHTML += 3;
}
four.addEventListener("click", addFour);
function addFour() {
display.innerHTML += 4;
}
five.addEventListener("click", addFive);
function addFive() {
display.innerHTML += 5;
}
six.addEventListener("click", addSix);
function addSix() {
display.innerHTML += 6;
}
seven.addEventListener("click", addSeven);
function addSeven() {
display.innerHTML += 7;
}
eight.addEventListener("click", addEight);
function addEight() {
display.innerHTML += 8;
}
nine.addEventListener("click", addNine);
function addNine() {
display.innerHTML += 9;
}
zero.addEventListener("click", addZero);
function addZero() {
display.innerHTML += 0;
}
decimal.addEventListener("click", addDecimal);
function addDecimal() {
display.innerHTML += '.';
}
add.addEventListener("click", addAdd);
function addAdd() {
x = display.innerHTML; //assigning the current display number as x
op = '+'; //assigning the operator + to the variable op
z = x + op;//possibly part of the solution I'll explain below
display.innerHTML += op; //the display equals the displayed number + the operation
calculate.addEventListener("click", calc);
function calc() { //calc function needs to have y defined this is where my question comes in
display.innerHTML = eval(x + op + y); //work in progress calculation formula
}
}
subtract.addEventListener("click", addSubtract);
function addSubtract() {
x = display.innerHTML;
op = '-';
z = x + op;
display.innerHTML += op;//the display equals the displayed number + the operation
calculate.addEventListener("click", calc);
function calc() {
display.innerHTML = eval(x + op + y);
}
}
multiply.addEventListener("click", addMultiply);
function addMultiply() {
x = display.innerHTML;
op = '*';
z = x + op;
display.innerHTML += op;//the display equals the displayed number + the operation
calculate.addEventListener("click", calc);
function calc() {
display.innerHTML = eval(x + op + y);
}
}
divide.addEventListener("click", addDivide);
function addDivide() {
x = display.innerHTML;
op = '/';
z = x + op;
display.innerHTML += op;//the display equals the displayed number + the operation
calculate.addEventListener("click", calc);
function calc() {
display.innerHTML = eval(x + op + y);
}
}
</script>
</body>
</html>