How to Rewind an Ordered String List

Asked

Viewed 77 times

0

Let’s say, I click the button More and I’m going forward to A - Z.

Now I wish to go back to Z - A click on the button Least.

Code:

var i = 0;    
var j = 0;
var n = 0;      

function prox(){
j++;
i += 20; 
barra = texto.split("|");
document.getElementById('lista').innerHTML = ' ';
for ( x = n; x < i; x++ ){
  if(barra[x]){
document.getElementById('lista').innerHTML += "<br>"+barra[x]+"<br>";
	}
}
if (j) {n = i}
}

function ante(){
j--;
i -= 20; 

barra = texto.split("|").reverse();
document.getElementById('lista').innerHTML = ' ';
for ( p = n; p > i; p-- ){
  if(barra[p]){
document.getElementById('lista').innerHTML += "<br>"+barra[p]+"<br>";
	}
}
if (j) {n = i}
}

texto = 

// clique 1 - listagem 1
"|A|"+
"|B|"+
"|C|"+
"|D|"+
"|E|"+

// clique 2 - listagem 2
"|F|"+
"|G|"+
"|H|"+
"|I|"+
"|J|"+

// clique 3 - listagem 3
"|K|"+
"|L|"+
"|M|"+
"|N|"+
"|O|"+

// clique 4 - listagem 4
"|P|"+
"|Q|"+
"|R|"+
"|S|"+
"|T|"+

// clique 5 - listagem 5
"|U|"+
"|V|"+
"|W|"+
"|X|"+
"|Y|"+
"|Z|";
<div id="lista"></div>

<hr color=silver size=1>

<a onclick="ante();">&#171 Menos</a>

&nbsp;
|
&nbsp;

<a onclick="prox();">Mais &#187</a>


Only, this one button less is not responding in the right way!

javascript html css
  • 1

    I think can do exactly as did the function prox(). All the same except barra = texto.split("|").reverse();, this is to keep

2 answers

1


Now I get papaya with sugar, then adapts to your need, see if it fits...

<body onload="load();">
    <div>
	    <button type="button" id="volta" onclick="voltaPag()" value="volta" />&#171</button>
	    <button type="button" id="prox" onclick="proxPag()" value="prox" />&#187</button>
	    <div id="lista"></div>
    </div>
</body>
<script type="text/javascript">
    var lista = new Array("|A|","|B|","|C|","|D|","|E|","|F|","|G|","|H|","|I|","|J|","|K|","|L|","|M|","|N|","|O|","|P|","|Q|","|R|","|S|","|T|","|U|","|V|","|W|","|X|","|Y|","|Z|");
    var pagLista = new Array();
    var currentPage = 0;
    var numPorPag = 5;
    var numPag = 0;
    
    
function geraLista() {
	aLen = lista.length;
	text = "<ul>";
    for (x = 0; x < aLen; x++){
    text += "<li>" + lista[x] + "</li>";
}
text += "</ul>";
document.getElementById("lista").innerHTML = text;
numPag = getnumPag();
}

function getnumPag() {
    return Math.ceil(lista.length / numPorPag);
}

function proxPag() {
    currentPage += 1;
    loadLista();
}

function voltaPag() {
    currentPage -= 1;
    loadLista();
}

function loadLista() {
    var begin = ((currentPage - 1) * numPorPag);
    var end = begin + numPorPag;

    pagLista = lista.slice(begin, end);
    desList();
    check();
}
    
function desList() {
    document.getElementById("lista").innerHTML = "";
    for (r = 0; r < pagLista.length; r++) {
        document.getElementById("lista").innerHTML += pagLista[r] +"</br>";
    }
}

function check() {
    document.getElementById("prox").disabled = currentPage == numPag ? true : false;
    document.getElementById("volta").disabled = currentPage == 0 ? true : false;
}

function load() {
    geraLista();
    loadLista();
}
    

</script>

If serving in a forgets to validate the answer... vlw _(ツ)_/

  • What does that mean?

  • You want me to leave the same as yours with intervals?

  • Note again I made change of how the code was before your reply. Atente p/ one thing it does, is show a list of a certain group of items and those same intense A - Z are in their decreasing formation, so what I really seek, would be to backtrack s/ any modification, in short, the position of the letters would have to remain in the same place. Got it? Otherwise, say I’m here all night.

  • What you want is for each click to show 1 group in the sequence of a-z, divided into 5 groups, and when clicking to reverse, in fact it will not reverse the order but rather reverse the groups that were shown ? Ex: by clicking forward it shows group 1, 2, 3, 4, 5, by clicking back it shows 1,2,3,4 after 1,2,3 after 1,2 and then 1 and then nothing is that?

  • @Diegohenriqueguilherme Nobody sleeps!!!!!! I talk stay with God!

  • If it helped you in a forget to validate the answer... VLW Batman..;)

Show 1 more comment

0

In addition to the reply of @Magichat, give another similar.

Now allied with comment from @Miguel to the operation of my script, I was sure that after some time without abandoning code, would solve the.

The way was to remove the line barra = texto.split("|").reverse(); of function ante() and add another inversion routine. Check out:

Code

var i = 0;    
var j = 0;
var n = 0;      

function prox(){

j++;

i += 20; 

barra = texto.split("|");

document.getElementById('txt').innerHTML = ' ';

for ( x = n; x < i; x++ ){

  if(barra[x]){

document.getElementById('txt').innerHTML +=  "<br>"+barra[x]+"<br>";

	}
}

if (j) {n = i}

}

function ante(){

j--;

i -= 20; 

document.getElementById('txt').innerHTML = ' ';

for ( p = n; p > i; p-- ){

  if(barra[p]){

document.getElementById('txt').innerHTML += barra[p];

	}
}

if (j) {n = i}

}

texto = 

// clique 1 - listagem 1
"|A|"+
"|B|"+
"|C|"+
"|D|"+
"|E|"+

// clique 2 - listagem 2
"|F|"+
"|G|"+
"|H|"+
"|I|"+
"|J|"+

// clique 3 - listagem 3
"|K|"+
"|L|"+
"|M|"+
"|N|"+
"|O|"+

// clique 4 - listagem 4
"|P|"+
"|Q|"+
"|R|"+
"|S|"+
"|T|"+

// clique 5 - listagem 5
"|U|"+
"|V|"+
"|W|"+
"|X|"+
"|Y|"+
"|Z|";


/* Rotina que faz a inversão de Baixo pra Cima */

function troca() 
{
var listar = document.getElementById('txt');

listar.innerHTML = listar.innerHTML.split('').reverse().join(' ').replace(/\s/g, "<br><br>");
}
<span id='txt'></span>

<hr color=gray size=1>

<center>

<button onclick="ante();troca()"> Anterior</button>

&nbsp; | &nbsp;

<button onclick="prox();">Proximo</button>

</center>

Browser other questions tagged javascript html css

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