How to dynamize a numerical sequence of 3 in 3 numbers following the order?

Navigation
7

Type:

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

And so on.

Example 

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>

In the above example, I set a limit for each click, it is not necessary to limit and can be unlimited for what I need.

So, I just want to always play 3 in 3 numbers, always get the last number and continue the sequence.

What I want to do is automate and improve the function without having to manually set the numbers and their order.

    
asked by anonymous 15.02.2017 / 00:16

3 answers

6

There are several ways, for example, by saving the items to a Array() and then printing all to a div .

Example: 

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>

Another example >

tag 'html' "> html comes before the code javascript not have problems and cause errors .

    
15.02.2017 / 00:25
2

Follow other alternatives:

We have to define three variables in the global scope that will work as initialization , another as condition , and a click counter.

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

Example 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()" />


  

NOTE - The Example 2 script should be inserted at the end of the HTML document between </body> ... </html> , to avoid faults in execution.

     

The reason we put the <script> element near the end of the HTML file is that the <p id="txt"> &nbsp; </p> HTML element is loaded by the browser in the order that it appears in the file. If JavaScript is loaded first it should affect the HTML element below it, but sometimes this may not work, since JavaScript would be loaded before the HTML element on which it should work. So near the bottom of the page, it's usually the best strategy.

    
15.02.2017 / 14:35
1

I used jQuery 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype="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>
    
15.02.2017 / 18:23
Is it possible to initialize only some members of an array in C already in its definition? Are static classes shared by threads?