JavaScript 带有清除按钮的计算器问题

Question

我用 javaScript 制作了一个计算器，除了清除按钮外，它可以正常工作。

我希望屏幕在按下后变为空白，但由于某种原因屏幕只显示 'Clear'。

我假设这个语句会在按下按钮后清除 space....但是它似乎没有做任何事情。

if(buttonValues == 'Clear') {
   input.innerHTML = '';
   onlyDecimal = false;
}

这是我的在线计算器 http://calculator.noahalexfarr.com/calculator.html

这是我的完整代码。感谢您的宝贵时间！

<!DOCTYPE html>
<html>

<head>

  <title>Calculator</title>

  <meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="css/style.css">

  <script src="js/prefixfree.min.js" type="text/javascript"></script>

  <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>

</head>

<body>

  <div id="calculator">

    <div class="the_head">

      <span class="clear">Clear</span>
      <div class="input_field"></div>

    </div>

    <div class="buttons">

      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span>0</span>
      <span>.</span>
      <span class="eval">=</span>
      <span class="mathSymbols">+</span>
      <span class="mathSymbols">-</span>
      <span class="mathSymbols">*</span>
      <span class="mathSymbols">/</span>

    </div>
  </div>

  <script>
    //select calculators buttons
    var buttons = document.querySelectorAll('#calculator span');

    var mathSymbols = ['+', '-', '*', '/'];

    var onlyDecimal = false;

     // click events for all buttons and functions
    for (var i = 0; i < buttons.length; i++) {

      buttons[i].onclick = function(e) {
        console.log('you clicked a button');

        //gets input values
        var input = document.querySelector('.input_field');
        var inputValues = input.innerHTML;
        var buttonValues = this.innerHTML; //this will refer to button Values

        //the clear button.....clears the calculator
        if (buttonValues == 'Clear') {
          input.innerHTML = '';
          onlyDecimal = false;
        }

        //equals button, the result will be displayed in the input field
        if (buttonValues == '=') {

          var equals = inputValues;

          var lastSymbol = equals[equals.length - 1];

          //check the last button pressed to ensure it was not a decimal or math symbol.

          if (mathSymbols.indexOf(lastSymbol) > -1 || lastSymbol == '.')
            equals = equals.replace(/.$/, '');

          if (equals)
            input.innerHTML = eval(equals);

          onlyDecimal = false;

        }

        //math symbols are clicked
        else if (mathSymbols.indexOf(buttonValues) > -1) {
          //math symbols are clicked

          //get the last symbol pressed

          var lastSymbol = inputValues[inputValues - 1];

          //only use a math symbol if the input field is NOT empty
          if (inputValues != '' && mathSymbols.indexOf(lastSymbol) == -1) {
            input.innerHTML += buttonValues;

          }

          //minus can be used if empty
          else if (inputValues == '' && buttonValues == '-')
            input.innerHTML += buttonValues;

          // Replaces the last math function pressed with the newly pressed function

          if (mathSymbols.indexOf(lastSymbol) > -1 && inputValues.length > 1) {

            input.innerHTML = inputValues.replace(/.$/, buttonValues); //$ is the end of the string, any math function used will be replaced

          }
          onlyDecimal = false;
        }

        // this will sure only one decimal is used so the user cannot enter something like 12.56.7.8
        else if (buttonValues == '.') {
          if (!onlyDecimal) {
            input.innerHTML += buttonValues;
            onlyDecimal = true;
          }

        }



        //basic button functions
        else {
          input.innerHTML += buttonValues;
        }


      }

    }
  </script>



</body>

</html>

Answer 1

您需要设置输入值而不是内部 html。

<!DOCTYPE html>
<html>

<head>

  <title>Calculator</title>

  <meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="css/style.css">

  <script src="js/prefixfree.min.js" type="text/javascript"></script>

  <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>

</head>

<body>

  <div id="calculator">

    <div class="the_head">

      <span class="clear">Clear</span>
      <div class="input_field"></div>

    </div>

    <div class="buttons">

      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span>0</span>
      <span>.</span>
      <span class="eval">=</span>
      <span class="mathSymbols">+</span>
      <span class="mathSymbols">-</span>
      <span class="mathSymbols">*</span>
      <span class="mathSymbols">/</span>

    </div>
  </div>

  <script>
    //select calculators buttons
    var buttons = document.querySelectorAll('#calculator span');

    var mathSymbols = ['+', '-', '*', '/'];

    var onlyDecimal = false;

     // click events for all buttons and functions
    for (var i = 0; i < buttons.length; i++) {

      buttons[i].onclick = function(e) {
        console.log('you clicked a button');

        //gets input values
        var input = document.querySelector('.input_field');
        var inputValues = input.innerHTML;
        var buttonValues = this.innerHTML; //this will refer to button Values

        //the clear button.....clears the calculator
        if (buttonValues == 'Clear') {
          input.val('');
          onlyDecimal = false;
        }

        //equals button, the result will be displayed in the input field
        if (buttonValues == '=') {

          var equals = inputValues;

          var lastSymbol = equals[equals.length - 1];

          //check the last button pressed to ensure it was not a decimal or math symbol.

          if (mathSymbols.indexOf(lastSymbol) > -1 || lastSymbol == '.')
            equals = equals.replace(/.$/, '');

          if (equals)
            input.innerHTML = eval(equals);

          onlyDecimal = false;

        }

        //math symbols are clicked
        else if (mathSymbols.indexOf(buttonValues) > -1) {
          //math symbols are clicked

          //get the last symbol pressed

          var lastSymbol = inputValues[inputValues - 1];

          //only use a math symbol if the input field is NOT empty
          if (inputValues != '' && mathSymbols.indexOf(lastSymbol) == -1) {
            input.innerHTML += buttonValues;

          }

          //minus can be used if empty
          else if (inputValues == '' && buttonValues == '-')
            input.innerHTML += buttonValues;

          // Replaces the last math function pressed with the newly pressed function

          if (mathSymbols.indexOf(lastSymbol) > -1 && inputValues.length > 1) {

            input.innerHTML = inputValues.replace(/.$/, buttonValues); //$ is the end of the string, any math function used will be replaced

          }
          onlyDecimal = false;
        }

        // this will sure only one decimal is used so the user cannot enter something like 12.56.7.8
        else if (buttonValues == '.') {
          if (!onlyDecimal) {
            input.innerHTML += buttonValues;
            onlyDecimal = true;
          }

        }



        //basic button functions
        else {
          input.innerHTML += buttonValues;
        }


      }

    }
  </script>



</body>

</html>

Answer 2

我认为你漏掉了 else if。问题是它仍然会在末尾 (input.innerHTML += buttonValues;) 处命中 else 块以附加值。

我认为您的代码应为：

if (buttonValues == 'Clear') {
    input.innerHTML = '';
    onlyDecimal = false;
} else if (buttonValues == '=') {
}
// .......

Answer 3

清除后添加return;。如，

if (buttonValues == 'Clear') {
    input.innerHTML = "";
    onlyDecimal = false;
    // do not continue making decisions, clear the box and exit
    return;  
}

(已更新 使上面显示的代码匹配下面的代码运行)

请参阅下面的运行代码：

<!DOCTYPE html>
<html>

<head>

  <title>Calculator</title>

  <meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="css/style.css">

  <script src="js/prefixfree.min.js" type="text/javascript"></script>

  <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>

</head>

<body>

  <div id="calculator">

    <div class="the_head">

      <span class="clear">Clear</span>
      <div class="input_field"></div>

    </div>

    <div class="buttons">

      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span>0</span>
      <span>.</span>
      <span class="eval">=</span>
      <span class="mathSymbols">+</span>
      <span class="mathSymbols">-</span>
      <span class="mathSymbols">*</span>
      <span class="mathSymbols">/</span>

    </div>
  </div>

  <script>
    //select calculators buttons
    var buttons = document.querySelectorAll('#calculator span');

    var mathSymbols = ['+', '-', '*', '/'];

    var onlyDecimal = false;

     // click events for all buttons and functions
    for (var i = 0; i < buttons.length; i++) {

      buttons[i].onclick = function(e) {
        console.log('you clicked a button');

        //gets input values
        var input = document.querySelector('.input_field');
        var inputValues = input.innerHTML;
        var buttonValues = this.innerHTML; //this will refer to button Values

        //the clear button.....clears the calculator
        if (buttonValues === 'Clear') {
          input.innerHTML = "";
          onlyDecimal = false;
          return;
        }

        //equals button, the result will be displayed in the input field
        if (buttonValues == '=') {

          var equals = inputValues;

          var lastSymbol = equals[equals.length - 1];

          //check the last button pressed to ensure it was not a decimal or math symbol.

          if (mathSymbols.indexOf(lastSymbol) > -1 || lastSymbol == '.')
            equals = equals.replace(/.$/, '');

          if (equals)
            input.innerHTML = eval(equals);

          onlyDecimal = false;

        }

        //math symbols are clicked
        else if (mathSymbols.indexOf(buttonValues) > -1) {
          //math symbols are clicked

          //get the last symbol pressed

          var lastSymbol = inputValues[inputValues - 1];

          //only use a math symbol if the input field is NOT empty
          if (inputValues != '' && mathSymbols.indexOf(lastSymbol) == -1) {
            input.innerHTML += buttonValues;

          }

          //minus can be used if empty
          else if (inputValues == '' && buttonValues == '-')
            input.innerHTML += buttonValues;

          // Replaces the last math function pressed with the newly pressed function

          if (mathSymbols.indexOf(lastSymbol) > -1 && inputValues.length > 1) {

            input.innerHTML = inputValues.replace(/.$/, buttonValues); //$ is the end of the string, any math function used will be replaced

          }
          onlyDecimal = false;
        }

        // this will sure only one decimal is used so the user cannot enter something like 12.56.7.8
        else if (buttonValues == '.') {
          if (!onlyDecimal) {
            input.innerHTML += buttonValues;
            onlyDecimal = true;
          }

        }



        //basic button functions
        else {
          input.innerHTML += buttonValues;
        }


      }

    }
  </script>



</body>

</html>

JavaScript 带有清除按钮的计算器问题

JavaScript Calculator issue with clear button

html

javascript

calculator