How to return to the initial value after a change in the event

Navigation
0

I have this code: 

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>

What's the idea: It's that every time I change the value in select , it goes back to the starting point with the modifications. Example: select is showing on 3 and on the second page, then:

  • 4
  • 5
  • 6

When I select the value 5 in select , it should return the home page with:

  • 1
  • 2
  • 3
  • 4
  • 5

In the current case of the code, if I change to 5, it will be:

  • 4
  • 5
  • 6
  • 7
  • 8

Could someone help me?

    
asked by anonymous 24.02.2018 / 18:28

1 answer

1

The only thing you need to do is reassign the variable inicial to 0 in the change event of your <select> : 

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

The change event is executed whenever there is a change in the <select> , such as choosing the 5 value.

See how this works just as you want: 

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>

Only one note. Pay attention to ; at the end of the instructions. They are not actually required at this time, but you may want to be consistent. So either put it always or never put it.

    
24.02.2018 / 19:13
Error executing JSF project by eclipse [closed] Generate multiple records in MySQL