0

eu estou com este código:

let inicial = 0
let vPag = 3

const numeros = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];

render()

function resultadoPag(pagina){
  vPag = pagina.value;
    render();

}

function proximo (){
 if((inicial+1)*vPag < numeros.length)
   inicial++;
     render();
  
}

function anterior(){
  if((inicial-1)*vPag >=0)
    inicial--; 
      render()
}

function render (){
  document.getElementById("lugar").innerHTML=''
    for(let i = inicial*vPag; i < ((inicial+1)*vPag) && i < numeros.length && i >= 0;i++){
        const ul           = document.createElement('UL');
        const numerosUl    = document.createTextNode(numeros[i]);
        const lugarElement = document.getElementById("lugar");
      
        ul.appendChild(numerosUl);
      
        lugarElement.appendChild(ul);
    } 
} 
<html>
  <div id='total'>
  <button onClick="proximo()"> Próximo </button>
  <div id="lugar">  Teste </div>
  
  <button onClick="anterior()"> Anterior </button>
  
  Deseja ver quantos elementos por vez 
  <select id='select' onchange="resultadoPag(this)">
  <option value="3" >3</option>
  <option value="5" >5</option>
  <option value="10" >10</option>
</select>
  </div>
</html>

Qual é a ideia: É que cada vez que eu altere o valor no select, ele volte ao ponto inicial com as modificações. Exemplo: O select está mostrando em 3 e na segunda página, então aparecerá:

  • 4
  • 5
  • 6

Quando eu selecionasse o valor 5 no select, ele deveria retornar a página inicial com:

  • 1
  • 2
  • 3
  • 4
  • 5

No caso atual do código, se eu trocar para 5, ficará:

  • 4
  • 5
  • 6
  • 7
  • 8

Alguem poderia me ajudar ?

1 Resposta 1

1

A única coisa que precisa de fazer é voltar a atribuir a variável inicial a 0 no evento change do seu <select>:

function resultadoPag(pagina){
  vPag = pagina.value;
  inicial = 0; //só colocar mais esta linha
  render();
}

O evento change é executado sempre há uma alteração no <select>, como por exemplo escolher o valor 5.

Veja como só com isso já funciona como pretende:

let inicial = 0
let vPag = 3

const numeros = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];

render()

function resultadoPag(pagina){
  vPag = pagina.value;
  inicial = 0; //linha adicionada
    render();

}

function proximo (){
 if((inicial+1)*vPag < numeros.length)
   inicial++;
     render();
  
}

function anterior(){
  if((inicial-1)*vPag >=0)
    inicial--; 
      render()
}

function render (){
  document.getElementById("lugar").innerHTML=''
    for(let i = inicial*vPag; i < ((inicial+1)*vPag) && i < numeros.length && i >= 0;i++){
        const ul           = document.createElement('UL');
        const numerosUl    = document.createTextNode(numeros[i]);
        const lugarElement = document.getElementById("lugar");
      
        ul.appendChild(numerosUl);
      
        lugarElement.appendChild(ul);
    } 
}
<html>
  <div id='total'>
  <button onClick="proximo()"> Próximo </button>
  <div id="lugar">  Teste </div>
  
  <button onClick="anterior()"> Anterior </button>
  
  Deseja ver quantos elementos por vez 
  <select id='select' onchange="resultadoPag(this)">
  <option value="3" >3</option>
  <option value="5" >5</option>
  <option value="10" >10</option>
</select>
  </div>
</html>

Apenas uma nota. Tenha atenção aos ; no final das instruções. Eles neste momento na verdade não são obrigatórios, no entanto convém ser consistente. Por isso ou coloca sempre ou nunca coloca.

1
  • Nossa, muito obrigado pela dica e pela analise. Me ajudou bastante no meu aprendizado. <3
    – Jota
    Commented 25/02/2018 às 3:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .