CODEWITHSUNDEEP
javascripthtmlcalculator
NAFarr
NAFarr

Reputation: 67

JavaScript Calculator issue with clear button

I made a calculator using javaScript and it works except for the clear button.

I want the screen to go blank after it is pressed, but for some reason the screen just reads 'Clear'.

I assumed this statement would clear the space after the button was pressed.... but alas it does not appear to do anything.

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

Here is my calculator online http://calculator.noahalexfarr.com/calculator.html

Here is my full code. Thank you for your time!

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

Upvotes: 1

Views: 2577

Answers (3)

blurfus
blurfus

Reputation: 14031

Add return; after clearing. As in,

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

(Updated to make code shown above match code running below)

See running code below:

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

Upvotes: 1

Evan Trimboli
Evan Trimboli

Reputation: 30092

I think you're missing an else if. The problem is that it still hits the else block at the end (input.innerHTML += buttonValues;) to append the value.

I think your code should read:

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

Upvotes: 1

Blake
Blake

Reputation: 641

You'll want to set the value of the input instead of the inner 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>

Upvotes: 2

Related Questions