How to clear/remove ALL elements of the javascript array?

Question

I’m creating a javascript calculator for better learning and am having difficulty in remover todos os elementos do array. Know when you click the button "AC" calculator and it removes everything? That’s what I want to do.

My code in HTML:

<div class="row" id="btnTop">
            <div class="btn-group btn-group-lg">
              <button type="button" class="btn btn-light"  id="AC" onclick="clicado(this.id)">AC</button>
              <button type="button" class="btn btn-light"  id="/" onclick="clicado(this.id)">/</button>
              <button type="button" class="btn btn-light"  id="x" onclick="clicado(this.id)">x</button>
              <button type="button" class="btn btn-light"  id="<" onclick="clicado(this.id)"><</button>
            </div>
          </div> <!-- Fim btnTop -->

          <div class="row" id="btn789">
            <div class="btn-group btn-group-lg">
              <button type="button" class="btn btn-light" id="7" onclick="clicado(this.id)">7</button>
              <button type="button" class="btn btn-light" id="8" onclick="clicado(this.id)">8</button>
              <button type="button" class="btn btn-light" id="9" onclick="clicado(this.id)">9</button>
              <button type="button" class="btn btn-light" id="%" onclick="clicado(this.id)">%</button>
            </div>
          </div> <!-- Fim btn789 -->

My code in Javascript:

<script type="text/javascript">

      var i = 0;
      var clicks = Array();

      function clicado(id) {

          if (id != "AC" && id != "<") {

             clicks[i] = id;
             i++;

           // document.getElementById("mostrarValores").innerHTML = id;
            console.log("Array: "+clicks);

          }      

          if (id == "<") {

            clicks.pop();
            console.log("Array Removido: "+clicks);
          }

          if (id == "AC") {

            while(clicks.length) {
              clicks.pop();
            }

            console.log("Array Zerado: "+clicks);

          }

      }

    </script>

No stackoverflow even I found answers to remove like this:

while(clicks.length) {
   clicks.pop();
}

That from what I understood, he’d run the array by the size of it and as long as there was something in it, it would remove the last element until it had nothing.

However, when I test in the browser, I add some numbers, delete with AC and then add other numbers, the array starts with several commas. I noticed that the amount of the comma, is the amount of previously deleted elements.

The problem is that I wanted to erase with the AC, he started from scratch even without the commas.

Follow my test image in the browser:

NOTE: I’ve tried clicks.length = 0 too and it didn’t help.

Answer 1

When the button AC just replace your code

... while(clicks.length) {
          clicks.pop();
        } ...

by one of the options below:

1. clicks = []; i = 0;
2. clicks.length = 0; i = 0;

Explanations below:

1: Creates a new reference to the clicks array causing it to reset all of its existing elements.

2: Javascript semantics determines that if you decrease the length of an array, all elements in the new length and above should be excluded.

To clear values of any array, using one of the above forms will be valid in any context, however, you did not notice the following: variable i. The problem was that when you "zeroed" your internal values, the variable i was not zeroed together, causing in its construction clicks[i] = id; the array inserted its values from the variable i, for example: if you inserted the values in your list 7,8,7 and then cleaned the variable clicks, i kept its value incremented in each i++(in this case 3), and that is where the problem occurred, when clicked on AC and then added some value, clicks[i] = id would add the id clicked at position 3, so the explanation of the commas in the array displayed in your console!

I also advise changing your id code:

  if (id == "<") {
    clicks.pop();
    console.log("Array Removido: "+clicks);
  }

To:

  if (id == "<") {
    clicks.pop();
    if(i > 0 ){
        i--;
    }
    console.log("Array Removido: "+clicks);
  }

I hope I’ve helped and good studies!