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 ?