After a few attempts based on the answers from colleagues here, I had a clear vision, just set two variables with a scopo to be initialization and another to condition , the " click counter " the part Let's look at the result, 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 you have to add / traverse by 20 in 20?
I say! - For my purpose as they can parse I'm looking for data from within a method new String()
.
However, I wanted to only display 5 strings per click.
For every data between double quotes, we have the " | " bars, which in turn divides the data, namely: 4 bars by string .
Knowing this, multiply 4 barras
by 5 strings
= 20 linhas
In this way, the var n=0
, n += 20
and var i=0
, i += 20
are created to change the declaration declaration and the statement declaration for
So we have the 20 in 20 lines
NOTE - What I had in mind when I asked this question was to create an infinite sroll effect in Pure Javascript. I realized that I could do it with a loop
with the method scrollTop()
. It was in this intention that I came to the conclusion that not only would it create the infinite scroll effect with this logic but also make static pagination and randomize the information on the page.
Because you could not use the syntax of for
as it is itself, you would not have to go through it in sequence (ordinal numbers), of course this is how a loop does. If I did so, with each click on the button it would return only the twentieth (last) line of each string
.