5

Estou criando uma calculadora em javascript para melhor aprendizado e estou tendo dificuldade em remover todos os elementos do array. Sabe quando você clica no botão "AC" da calculadora e ele remove tudo? É isso que quero fazer.

Meu código em 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 -->

Meu código em 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 mesmo eu encontrei respostas para remover assim:

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

Que pelo que eu entendi, ele correria o array pelo tamanho dele e enquanto tivesse algo nele, ele iria removendo o último elemento até não ter nada.

Porém, quando eu testo no navegador, adiciono alguns números, apago com AC e depois adiciono outros números, o array começa com várias vírgulas. Notei que a quantidade da virgula, é a quantidade de elementos apagados anteriormente.

O problema é que eu queria que ao apagar com o AC, ele começasse do zero mesmo, sem as virgulas.

Segue a imagem do meu teste no navegador: inserir a descrição da imagem aqui

OBS: Já tentei clicks.length = 0 também e não adiantou.

2
  • 1
    Por que não redefine a array com clicks = []?
    – Sam
    Commented 25/11/2018 às 22:35
  • 1
    Tentei redefinir com clicks = [] e continuou o mesmo problema. Commented 25/11/2018 às 22:56

1 Resposta 1

3

Quando o botão AC basta você substituir o seu código

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

por uma das opções abaixo:

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

Explicações abaixo:

1: Cria uma nova referencia para o array clicks fazendo com que ele zere todos os seus elementos existentes.

2: A semântica do JavaScript determina que, se você diminuir o comprimento de um array, todos os elementos no novo comprimento e acima devem ser excluídos.

Para limpar valores de qualquer array, usando uma das formas acima será valido em qualquer contexto, porém, você não reparou o seguinte: a variável i. O problema era que quando você "zerava" os seus valores internos, a variável i não era zerada em conjunto, fazendo com que em sua construção clicks[i] = id; o array inserisse os seus valores a partir da variável i, por exemplo: se você inseriu os valores em sua lista 7,8,7 e em seguida limpou a variavel clicks, o i manteve o seu valor incrementado em cada i++(nesse caso 3), e aí é que o problema acontecia, quando clicado no AC e em seguida adicionado algum valor, o clicks[i] = id iria adicionar o id clicado na posição 3, por isso a explicação das vírgulas no array exibido no seu console!

Aconselho também alterar seu código do id:

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

Para:

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

Espero ter ajudado e bons estudos!

6
  • 1
    Já fiz o teste dessas duas maneiras e tenho o mesmo problema. Quando digito os números e clico em AC, ele apaga tudo, imprime no console "Array Zerado: " porém, após eu apagar tudo, eu tento inserir mais numeros e daí imprime no console "Array: ,,,,5". (5 foi o numero que inseri). O problema é que no momento em que eu insiro mais números (após eu ja ter apagado o array), ele imprime com essas virgulas na frente. Commented 25/11/2018 às 23:09
  • 1
    1 minuto vou usar seu código para ver em tempo de execução Commented 25/11/2018 às 23:12
  • Marcielli, encontrei o seu problema, vou editá-lo em minha resposta e você me diz se funcionou ok? Commented 25/11/2018 às 23:25
  • 1
    Ok, vou tentar aqui. Obrigada. Commented 25/11/2018 às 23:32
  • 1
    Fiz as mudanças aqui e funcionou certinho. Obrigada. Commented 25/11/2018 às 23:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .