Loop 20 to 20 lines

Question

I would like every click on the button to count, and the same would invoke the variavel to change the initialization and the condition of noose for, for a numerical value of 20 on 20.

It would be like walking the 0 à 20 and wait for another click. Then another click continued from 20 à 40 and wait again for the next click, which will now 40 à 60 and stop again, and etc...

That is, the Noose for is amended only in the initialization and its condition

for (initialization; condition; increment) { ... }

Demonstration:

In the first click

for (i = 20; i < 40; increment) { ... }

In the second click

for (i = 40; i < 60; increment) { ... }

In the third click

for (i = 60; i < 80; increment) { ... }

and so on, with each click.

Explaining - Where is 0 becomes 20 after the first click, just where it was 20 becomes 40 after the second click, and so it goes every click on the button successively, one after another click on the button will be changed its values.

I think it’s clear. Dynamic change in loop syntax with each click.

Answer 1

If I understood your question, just create a variable with a larger scope to be your click "counter", applying the lool rule to each click. See a simple example:

<p id="resultado">

</p>

<script>	
  var contador = 0;
  var test =  document.getElementById("resultado").innerHTML;
  
  function calcular(){
  	console.log(contador);
    var i = 10 + contador;
    var c = 20 + contador;

     for ( i; i < c; i++) {
     console.log(i)
        test += ' - ' + i;
    }
    document.getElementById("resultado").innerHTML = test;
    contador += 10;
  }
</script>

<button onclick="calcular()">
Calcular
</button>

Answer 2

fromInclusive (initialization) and toExclusive (condition) must come from somewhere. for example, two text boxes.:

var fromInclusive = document.getElementById("fromInclusive");
var toExclusive = document.getElementById("toExclusive");
var executar = document.getElementById("executar");
var resultado = document.getElementById("resultado");


executar.addEventListener("click", function (event) {
  var from = parseInt(fromInclusive.value);
  var to = parseInt(toExclusive.value);
  var result = 0;
  
  for (var indice = from; indice < to; indice++) {
    result += indice;
  }
  
  resultado.textContent = result;
  
  var diff = to - from;
  fromInclusive.value = from + diff;
  toExclusive.value = to + diff;
});

<div>
  <label>
    fromInclusive:
    <input id="fromInclusive" type="text" value="0" />
  </label>
</div>
<div>
  <label>
    toExclusive:
    <input id="toExclusive" type="text" value="10" />
  </label>
</div>
<div>
  <input id="executar" type="button" value="Somar Valores" />
  <span id="resultado"></span>
</div>

Answer 3

Simple as that:

for (var i = 0; i < 100; i+=10) 
{
    // ...
}

The incrementer ++ can be parameterized.

• ++ increment of 1;
• +=n increment of n, where n must >= 1;

It can also be a decreasing:

• -- decrease of 1;
• -=n decrease of n, where n >= 1;

Answer 4

After some attempts based on answers here from colleagues, I had a clear vision, just define two variable with a scope greater to be initialization and another to condition, already the "click counter" is the part. Let’s see the result of this, just below:

var n = 0; // Variável de Inicialização do laço  
        var i = 0; // Variável de Condição do laço  
        var j = 0; // Esta é variável que tão somente conta os cliques no botão

        function mais() {

            // Logo no primeiro clique inicia-se o Salto de 20 em 20 na declaração 2 - condição 
            i += 20;

            // Exibi o(s) número(s) de clique(s) dado(s)
            document.getElementById('view').textContent = i;
            // Nesta linha iremos quebrar/dividir o(s) dado(s) de cada string
            barra = dados.split("|");

            for (x = n; x < i; x++) {
                if (barra[x]) {

                    // Logo abaixo exibimos a informação na página de cada string

                    document.getElementById('list').innerHTML += "<br>" + barra[x] + "<br>";
                }
            }
            // No segundo clique inicia-se o Salto de 20 em 20 na declaração 1 - inicialização 
            // Isto se faz necessário para que não repita as primeiras linhas exibidas 
            // mas que de continuidade nas seguintes após as primeiras e assim por diante ...
            if (j) {
                n += 20
            }
        }
        dados = //Isto é a nosso banco de dados para o nosso exemplo

            // O 1º clique - Mostra a listagem 1 do A - E 
            "|A|Tam.: G|Cod.: 01|" +
            "|B|Tam.: M|Cod.: 02|" +
            "|C|Tam.: P|Cod.: 03|" +
            "|D|Tam.: P|Cod.: 04|" +
            "|E|Tam.: G|Cod.: 05|" +
            // O 2º clique - Mostra a listagem 2 do F - J 
            "|F|Tam.: P|Cod.: 06|" +
            "|G|Tam.: M|Cod.: 07|" +
            "|H|Tam.: P|Cod.: 08|" +
            "|I|Tam.: P|Cod.: 09|" +
            "|J|Tam.: G|Cod.: 10|" +
            // O 3º clique - Mostra a listagem 3 do K - O 
            "|K|Tam.: G|Cod.: 11|" +
            "|L|Tam.: M|Cod.: 12|" +
            "|M|Tam.: P|Cod.: 13|" +
            "|N|Tam.: P|Cod.: 14|" +
            "|O|Tam.: G|Cod.: 15|" +
            // O 4º clique - Mostra a listagem 4 do P - T 
            "|P|Tam.: G|Cod.: 16|" +
            "|Q|Tam.: M|Cod.: 17|" +
            "|R|Tam.: P|Cod.: 18|" +
            "|S|Tam.: P|Cod.: 19|" +
            "|T|Tam.: G|Cod.: 20|" +
            // O 5º clique - Mostra a listagem 5 do U - Y
            "|U|Tam.: G|Cod.: 21|" +
            "|V|Tam.: M|Cod.: 22|" +
            "|W|Tam.: P|Cod.: 23|" +
            "|X|Tam.: P|Cod.: 24|" +
            "|Y|Tam.: G|Cod.: 25|";

    <center>

        <input type="button" onclick="mais(j++)" value="Conta">

        <div id="view"></div>

        <hr>

        <div id="list"></div>

    </center>

---

But why would I have to add/traverse every 20?

I say! - For my purpose as you can analyze I am searching the data from within a method new String().

However, I just wanted to show off 5 strings per click.

With each dice between double quotes, we have the bars "|", which in turn makes the division of data, to know are: 4 bars for string.

Knowing this, it multiplies 4 barras for 5 strings = 20 linhas

Thus, the var n=0, n += 20 and the var i=0, i += 20 to change the declaration 1 and declaration 2 of the loop for

So we have the jump of 20 in 20 lines

NOTE - what I had in mind when I asked this question was creating an effect sroll infinity in Javascript Pure. I realized I could do it with a loop jutely with the method scrollTop(). It was in that intention that I came to the conclusion that, not only would it create the effect infinite scroll with this logic, but also, make static paging and randomize the information on the page.

'Cause I couldn’t use the syntax of for as it is in itself, there would be no way to traverse in sequence (ordinal numbers), of course that’s how a loop does. If I did so, at each click on the button it would return me only the vigesima(last) line of each string.