-2

A intenção é correr os cinco [5] primeiros números carnidais em sequência sendo exibidos de cinco-em-cinco, mas devendo se apagado os anteriores e posteriormente correr mais cinco [10] (que vai do 6 à 10), até atingir um certo limite imposto dentro da função, ou seja, será determinado até que ponto esses numerais serão aplicados pelos botões 'incrementar' e 'desicrementar'. Tenho tentado da seguinte forma:

var spn = document.getElementsByTagName('span');

function mostrarGrupo() {
  // Limitar o número de números a serem exibidos
  var inicio = 5;
  // Correr elementos span afim de quantificar
  for (var i = 0; i < spn.length; i++) {
    spn[i].innerHTML += inicio + 1;
    inicio++
  }
}

function esconderGrupo() {
  // Limitar o número de números a serem exibidos
  var inicio = 5;
  // Correr elementos span afim de quantificar
  for (var i = 0; i < spn.length; i--) {
    spn[i].innerHTML += inicio + 1;
    inicio--
  }
}
<center>

  <button id="menos" onclick="esconderGrupo">-</button>

  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>

  <button id="mais" onclick="mostrarGrupo">+</button>

</center>

PRINT

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

No momento estou pensando em outras soluções para este fim. No entanto, gostaria de ouvir ou ver o que vocês me sugerem?

1
  • 1
    Fora o erro de digitação já mencionado (faltou os parênteses ao chamar as funções), eu acho que esconderGrupo e mostrarGrupo não são bons nomes, pois nada está de fato sendo escondido, e a informação sempre é mostrada (acho que incrementarGrupo e decrementarGrupo ficaria melhor, pois é isso que está sendo feito). Sugestão: jsfiddle.net/ez7L6b8c/1
    – hkotsubo
    Commented 26/07/2021 às 12:42

1 Resposta 1

3

Existem alguns erros no seu código atual:

  • No atributo onclick dos botões, você não está chamando a função.

  • Ao somar o valor inicio + 1 (do tipo numérico) à variável spn[i].innerHTML (do tipo string), você na verdade está realizando uma concatenação de strings.

  • No loop da função esconderGrupo, ao utilizar i-- como atualizador, você criará um loop infinito.

Você pode fazer algo desse tipo:

var spn = document.getElementsByTagName('span');

function mostrarGrupo() {
  var inicio = 5;
  for (var i = 0; i < spn.length; i++) {
    // Converte o valor do `span` para inteiro
    const valor = parseInt(spn[i].innerHTML);
    
    // Define o valor do `span` como a soma dos valores
    spn[i].innerHTML = valor + inicio;
  }
}

function esconderGrupo() {
  var inicio = 5;
  for (var i = 0; i < spn.length; i++) {
      // Converte o valor do `span` para inteiro
      const valor = parseInt(spn[i].innerHTML);
    
      // Opcional: Evite que o usuário vá para números negativos
      if (i == 0 && (valor - inicio) < 0) return;

      // Define o valor do `span` como a subtração dos valores
      spn[i].innerHTML = valor - inicio;
  }
}
<center>

  <button id="menos" onclick="esconderGrupo()">-</button>

  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>

  <button id="mais" onclick="mostrarGrupo()">+</button>

</center>

1
  • 1
    Olá Enzo, estou fazendo análise que você apontou. E vendo a correção na tua resposta. Grato pela sua contribuição e tempo despendido em me ajudar, Commented 26/07/2021 às 12:38

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 .