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

Question

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

Navigation

#1 by (1 votes)

1

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

My HTML code:

<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 JavaScript code:

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

In the same stackoverflow I found answers to remove like this:

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

As far as I understood, it would run array by its size and as long as it had something in it, it would remove the last element until it had nothing.

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

The problem is that I wanted to delete it with the AC, it started from scratch without the commas.

Follow the image of my test in the browser:

NOTE: I already tried clicks.length = 0 also and it did not work.

javascript array

asked by anonymous 25.11.2018 / 23:06

1 answer

How to hide fixed div in mobile? Information for a specific tag

score 1 · Accepted Answer

When the AC button simply replaces your code

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

by one of the options below:

clicks = []; 
i = 0;

clicks.length = 0;
i = 0;

Explanations below:

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

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

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

I also suggest 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 to have helped and good studies!