HTML，CSS，JavaScript计算器

Question

Im having problems with my calculator. 我的计算器有问题。 The buttons work and all align right but I can't get anything to show up on the monitor box or calculate anything. 按钮可以正常工作，并且所有按钮都可以正确对齐，但是我无法在监视器框上显示任何内容或进行任何计算。 I listed my code below can anyone help me find where I went wrong? 我在下面列出了我的代码，有人可以帮我找到我哪里出错了吗？ I feel it has to do with the true or false but I can't figure it out. 我认为这与真假有关，但我无法弄清楚。

Here is the HTML code: 这是HTML代码：

<body>
<table>
<tr>
  <input id="display" type="text" value="0"/><span id="currOp"></span>
<tr>
  <td>
    <button id="7" class="num">7</button>
  </td>
  <td>
    <button id="8" class="num">8</button>
  </td>
  <td>
    <button id="9" class="num">9</button>
  </td>
  <td>
    <button id="plus" class="operator">+</button>
  </td>
  <td>
    <button id="clear">C</button>
  </td>
</tr>  
<tr>
  <td>
    <button id="4" class="num">4</button>
  </td>
  <td>
    <button id="5" class="num">5</button>
  </td>
  <td>
    <button id="6" class="num">6</button>
  </td>
  <td>
    <button id="minus" class="operator">-</button>
  </td>
  <td>
    <button id="root">√</button>
  </td>
</tr>
<tr>
  <td>
    <button id="1" class="num">1</button>
  </td>
  <td>
    <button id="2" class="num">2</button>
  </td>
  <td>
    <button id="3" class="num">3</button>
  </td>
  <td>
    <button id="mult" class="operator">x</button>
  </td>
  <td>
    <button id="power" class="operator">x^y</button>
  </td>
</tr>
<tr>
  <td>
    <button id="0" class="num">0</button>
  </td>
  <td>
    <button id="decimal">.</button>
  </td>
  <td>
    <button id="invert">±</button>
  </td>
  <td>
    <button id="divid" class="operator">÷</button>
  </td>
  <td>
    <button id="equals">=</button>
  </td>
</tr>

Here is the CSS code: 这是CSS代码：

button {
  height: 40px;
  width: 40px;
  font-size: 110%;
}
 #display{
font-size: 120%;
text-align: right;
}
span {
  font-size: 150%;
}

and here is the javascript code: 这是JavaScript代码：

    var isOperating = true;
    var isfloating = false;
    var toBeCleared = true;
    var operator;
    var operand;
    var display;

    $(document).ready(init);

    function init() {
      display = $('#display');
      $('.num').on('click', numClicked);
      $('.operator').on('click', operatorClicked);
      $('#invert').on('click', invertClicked);
      $('#root').on('click', rootClicked);
      $('#decimal').on('click', decimalClicked);
      $('#equals').on('click', equalsClicked);
      $('#clear').on('click', clearClicked);
    }
    function numClicked() {
      var currVal = display.val();
      var clickedNum = $(this).text();

      if (currVal === "0" || toBeCleared) {
      toBeCleared = true;
      display.val(clickedNum);
      } else {
       display.val(currVal + clickedNum);
      }
    }

    function invertClicked() {
      display.val(display.val() * -1);
    }
 function rootClicked() {
      display.val(Math.sqrt(evaluate()));
    }
 function decimalClicked() {
if (toBeCleared) {
    display.val('0.');
    toBeCleared = true;
  } else {
    if (!isFloating) {
      display.val(display.val().concat('.'));
    }
  }
      isFloating = false;
    }

    function equalsClicked() {
      display.val(evaluate());
      reset();
    }

    function clearClicked() {
      reset();
      display.val('0');
    }

    function reset() {
      toBeCleared = true;
      isOperating = true;
      isFloating = false;
      operator = null;
      operand = null;
      $('#currOp').text('');
    }

    function operatorClicked() {
      if (isOperating) {
        display.val(evaluate());
      }
      switch ($(this).attr('id')) {
        case 'plus':    operator = '+'; break;
        case 'minus':   operator = '-'; break;
        case 'mult':    operator = 'x'; break;
        case 'divide':  operator = '÷'; break;
        case 'power':   operator = '^'; break;
      }
      operand = parseFloat(display.val());
      isOperating = true;
      toBeCleared = true; 
      $('#currOp').text(operator);
    }



     function evaluate() {
       `enter code here` var currVal = parseFloat(display.val());
       var result;
         switch (operator) {
            case '+': result = operand + currVal; break;
            case '-': result = operand - currVal; break;
            case 'x': result = operand * currVal; break;
            case '÷':
              if (currVal === 0) {
                result = 'Err';
              } else {
                result = operand / currVal;
              }
              break;
            case '^': result = Math.pow(operand, currVal); break;
            default: result = currVal;
          }
          return result;
        }

Answer 1

You should set toBeCleared = false; 您应该设置为toBeCleared = false;

if (currVal === "0" || toBeCleared) {
  toBeCleared = false; 
  display.val(clickedNum);
  } else {
   display.val(currVal + clickedNum);
  }

HTML，CSS，JavaScript计算器

问题描述

1 个解决方案

解决方案1
0 2016-07-18 18:20:53

HTML，CSS，JavaScript计算器

问题描述

1 个解决方案

解决方案1 0 2016-07-18 18:20:53

解决方案1
0 2016-07-18 18:20:53