如何获得y的值等于计算器中操作数之后的数字?

时间:2018-09-02 05:17:28

标签: javascript html calculator

我已经获得了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>
我最好的猜测是z = x + op;遍历两个变量的长度以仅获取在操作数之后输入的数字。我只是不确定如何真正融入这个想法,或者是否有更好的解决方案。任何帮助将不胜感激。

0 个答案:

没有答案