Question

我使用javaScript制作了一个计算器，除了清除按钮外，它的工作原理。

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

我认为这句话会在按下按钮后清除空格......但是它似乎没有做任何事情。

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。

＆＃13;

<!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>

＆＃13;

Answer 2

我认为你错过了Root / \ / \ / \ / \ / \ - + / \ / \ - + - + / \ / \ / \ / \ - + - + - + - +。问题是它仍然会在末尾（else if）点击else块来追加值。

我认为您的代码应为：

input.innerHTML += 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计算器问题

3 个答案: