How to return to initial value after an event change

Asked

Viewed 66 times

0

I’m with 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: Is that every time I change the value in select, He goes back to the starting point with the modifications. Example: The select is showing in 3 and on the second page then will appear:

  • 4
  • 5
  • 6

When I selected the value 5 in select, he 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

Someone could help me ?

javascript html html-select javascript-events

1 answer

1


All you need to do is re-assign the variable inicial to 0 at the event change of your <select>:

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

The event change is always executed there is a change in the <select>, like choosing the value 5.

See how only with this already works 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>

Just one note. Pay attention to ; at the end of the instructions. They are actually not mandatory at this time, however it should be consistent. So either put it always or never put it.

  • Wow, thank you so much for the tip and the analysis. It helped me a lot in my learning. <3

Browser other questions tagged javascript html html-select javascript-events

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