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

Asked

Viewed 1,037 times

7

Type:

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

And so on and so forth.

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 example above I put a limit for each click, it is not necessary to limit being able to be unlimited for what I need.

Therefore, I just always want to play 3 out of 3 numbers catching the last number and continue in the sequence.

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

javascript

3 answers

5


It has several forms, for example, storing the items in a Array() and then printing them all into one 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

Observing: the code comes before the code to have no problems and cause mistakes.

2

Follows other alternatives:

We have to define three variables in the global scope that will function 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 Script of Example 2 should be inserted at the end of the HTML document between the </body> ... </html>, to avoid flaws in the execution.

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

  • 3

    instead of putting the <script> at the end of the page, could use a <script defer> :)

1

I used 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>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.