0

Estoy maquetando y tengo que prohibir mi clic durante 5 segundos entre pagina y pagina (es como un libro), no tengo ni idea de como hacerlo. Lo estoy haciendo dentro de un div a base de onclick y con una fucion abajo pero es que no tengo ni idea

1
  • 1
    Podrías bloquear el botón o no hacer nada con la función onclick() durante ese tiempo
    – Christian
    el 21 mar. 2021 a las 14:20

1 respuesta 1

1

Puedes usar un timeout para deshabilitar el boton por 5secs.

const botonAnterior = document.getElementById("anterior");
const botonSiguiente = document.getElementById("siguiente");

function pausarBoton(boton) {
  boton.disabled= true;
  setTimeout(function() {
    boton.disabled = false;
  }, 5000);
}

function adelante() {
  pausarBoton(botonSiguiente);
  const libro = document.querySelector('.libro');
  const paginas = document.querySelectorAll('.pagina');
  const paginaAnteriorActiva = false;
  for(let i = 0; i < paginas.length; i++) {
    const pagina = paginas[i];
    const esPaginaActiva = pagina.classList.contains('pagina-activa');
    const paginaSiguiente = paginas[i + 1];
    if (paginaSiguiente && esPaginaActiva) {
      pagina.classList.remove('pagina-activa');
      paginaSiguiente.classList.add('pagina-activa');
      break;
    }
  }
}

botonSiguiente.addEventListener("click", adelante)
body {
  background-color: grey;
  
}

.libro {
  display: flex;
}

.pagina {
  width: 100%;
  background-color: white;
  display: none;
  padding: 10px ;
}

.pagina h3 {
  padding: 0.5rem 0;
  border-bottom: 2px solid gray;
}

.pagina-activa {
  display: block;
}

.pagina-pie {
  margin: 0.5rem 0;
  display: flex;
  justify-content: flex-end;
}

.pagina-pie button {
  margin-left: 4px;
}
<section class="libro">
  <article class="pagina pagina-activa">
    <h3>Pagina #1</h3>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing at in tellus integer. Augue eget arcu dictum varius. Orci dapibus ultrices in iaculis nunc sed augue lacus. Quam elementum pulvinar etiam non. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Vulputate odio ut enim blandit. Mauris rhoncus aenean vel elit. Nisi vitae suscipit tellus mauris. Dui accumsan sit amet nulla facilisi morbi tempus. Lacus sed viverra tellus in hac habitasse platea dictumst vestibulum. Arcu dictum varius duis at consectetur. Aliquam ut porttitor leo a diam. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Ornare massa eget egestas purus viverra accumsan in. Porta non pulvinar neque laoreet suspendisse interdum. Nascetur ridiculus mus mauris vitae ultricies. Amet cursus sit amet dictum. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit.
    </div>
  </article>
  <article class="pagina">
   <h3>Pagina #2</h3>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ante metus dictum at tempor commodo ullamcorper a. Elit eget gravida cum sociis. Ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet. Ornare massa eget egestas purus viverra accumsan in nisl nisi. Vel turpis nunc eget lorem. Eleifend quam adipiscing vitae proin sagittis nisl. Ut venenatis tellus in metus vulputate eu scelerisque felis. Eros donec ac odio tempor orci dapibus ultrices in. Aliquam sem fringilla ut morbi tincidunt augue interdum. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus. Ut diam quam nulla porttitor massa id neque aliquam. Faucibus a pellentesque sit amet porttitor eget. Risus in hendrerit gravida rutrum quisque non tellus orci ac. Lacus suspendisse faucibus interdum posuere lorem. Sed adipiscing diam donec adipiscing tristique risus nec. Cursus turpis massa tincidunt dui ut ornare lectus.
    </div>
  </article>
  <article class="pagina">
   <h3>Pagina #3</h3>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo eget magna fermentum iaculis eu non diam phasellus. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Augue neque gravida in fermentum et. Et odio pellentesque diam volutpat commodo sed egestas egestas fringilla. Auctor elit sed vulputate mi sit amet mauris. Ut porttitor leo a diam sollicitudin tempor id eu nisl. Et netus et malesuada fames ac turpis egestas. Purus non enim praesent elementum facilisis leo vel fringilla. Arcu dictum varius duis at consectetur lorem donec massa. Integer eget aliquet nibh praesent tristique magna. Ut faucibus pulvinar elementum integer enim neque. Nulla facilisi etiam dignissim diam quis enim. Id leo in vitae turpis massa sed elementum. Ac tortor dignissim convallis aenean. At auctor urna nunc id cursus metus aliquam. Mi in nulla posuere sollicitudin. Laoreet id donec ultrices tincidunt arcu.
    </div>
  </article>
</section>
  <footer class="pagina-pie">
     <button id="siguiente">Siguiente</button>
  </footer>

1
  • Muchas gracias, justamente era una cosa interna de sus scripts que ponian el boton en invisible y que se guardaba el progreso. Igualmente tu ejemplo me ha ayudado mucho y a entender un poco todo esto, te lo agradezco <3
    – Juan
    el 22 mar. 2021 a las 11:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.