Which mode is it possible to add 5 out of 5 numbers and display by removing the previous ones each click on the increment/decrement button?

Question

The intention is to run the first five [5] Carnidais numbers in sequence by displaying five-in-five, but the previous ones should be deleted and then run another five [10] (from 6 to 10) until reaching a certain limit imposed within the function, that is, it will be determined to what extent these numerals will be applied by the 'increment' and 'de-create' buttons. This is how I’ve been trying:

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

At the moment I am thinking of other solutions for this purpose. However, I would like to hear or see what you suggest to me?

Answer 1

There are some errors in your current code:

• In the attribute onclick of the buttons, you are not calling the function.

• By adding up the value inicio + 1 (of the numeric type) to the variable spn[i].innerHTML (string type), you are actually performing a string concatenation.

• In the function loop esconderGrupo, when using i-- as an updater, you will create an infinite loop.

You can do something like this:

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>