7

Tipo:

1 2 3 ... 4 5 6 ... 7 8 9

E assim por diante.

Exemplo

var clic = 0;
function mais() {
  if (clic == 1) {
    document.getElementById('txt').textContent += "1 2 3 "
  } else if (clic == 2) {
    document.getElementById('txt').textContent += "4 5 6 "
  } else if (clic == 3) {
    document.getElementById('txt').textContent += "7 8 9 "
  } else {
    document.getElementById('btn').style.display = 'none';
  }
}
<input type="button" value="mais" id="btn" onclick="mais(clic++)" />
<p id="txt">&nbsp;</p>

No exemplo acima coloquei um limite para cada clique, não é necessário limitar podendo ser ilimitado para o que necessito.

Sendo assim, apenas quero sempre jogar de 3 em 3 números pegando sempe a último número e dar continuidade na sequência.

O que quero é automatizar e melhorar a função sem que precise definir manualmente os números e a sua ordem.

3 Respostas 3

5

Tem diversas formas, por exemplo, guardando os itens em um Array() e depois imprimindo todos em uma div.

Exemplo:

var items = Array();
var div1 = document.getElementById("div1");
function moreItems(total)
{
  for(i = 0; i < total; i++)
  {
      items.push(items.length + 1);
  } 
  viewItems(items);
}

function viewItems(items)
{
  div1.innerHTML = '';
  for(i = 0; i < items.length; i++)
  {
      div1.innerHTML += items[i] + ' ';
  }
}
<div id="div1"></div>
<button type="button" onclick="moreItems(3)">Acrescentar</button>

Outro exemplo

Observação: o código vem antes do código para não ter problemas e causar erros.

0
2

Segue outras alternativas:

Temos que definir três variáveis no escopo global que irão funcionar como inicialização, outra como condição, e um contador de cliques.

Exemplo 1

var n = 0;
var i = 0;
var clic = 0;
function mais() {
  clic++
  i += 3 // condição
  if (clic) {
    for (var x = n; x < i; x++) {
      document.getElementById('txt').textContent += x + '\n'
    }
  }
  if (clic) {
    n += 3 // inicialização
  }
}
<input type="button" value="mais" id="btn" onclick="mais(1)" />
<p id="txt">&nbsp;</p>

Exemplo 2

var clic = 0;
var num = document.getElementById("txt").textContent;

function mais() {
  var i = 0 + clic; // inicialização
  var n = 3 + clic; // condição
  for (var i; i < n; i++) {
    num += i + '\n';
  }
  document.getElementById("txt").textContent = num;
  clic += 3;
}
<p id="txt">&nbsp;</p>
<input type="button" value="mais" onclick="mais()" />


NOTA - O Script do Exemplo 2 deve ser inserido no fim do documento HTML entre o </body> ... </html>, para evitar falhas na execução.

A razão de termos colocado o elemento <script> perto do fim do arquivo HTML, é que o elemento HTML <p id="txt"> &nbsp; </p> é carregado pelo browser na ordem em que ele aparece no arquivo. Se o JavaScript é carregado primeiro ele deve afetar o elemento HTML abaixo dele, mas as vezes isso pode não funcionar, já que o JavaScript seria carregado antes do elemento HTML no qual ele deveria trabalhar. Portanto, próximo ao fim da página, geralmente é a melhor estratégia.

1
  • 3
    em vez de colocar o <script> no final da pagina, poderia usar um <script defer> :) Commented 15/02/2017 às 17:36
1

Usei jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  
  var n = 0;
  
  $("#click").click(function(){
    n += 3;
    var campo = $("#n").text();
    campo += n-2;
    campo += n-1;
    campo += n;
    $("#qtdeClick").text(n/3);
    $("#n").text(campo);
    $("#valorN").text(n);
  });
  
 });

</script>
<body>

  <input type="button" id="click" value="Clique"/>
  <p>Valor de N:<span id="valorN"></span></p>
  <p>QTDE de Clicks: <span id="qtdeClick"></span></p>
  <p id="n"></p>
</body>

0

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 .