Create the responsive next / previous button for my project-CodePudding

could you guys please help me creating a next and previous buttons ? I've been struggling because of my bad javascript . I saw some people use Jquery and almost all Javascript. I'm practicing Javascript so there are a lot of things I don't know. Thank you very much.

Wants: Next / Previous button to go to next page and go back page if users want to read again that page.

Link of my demo: https://jsfiddle. net/hioihia123/zgjswtay/3/

body {
  font-size: 18px;
  background: url("https://www.toptal.com/designers/subtlepatterns/patterns/groovepaper.png");
  font-family: 'Gelasio', serif;
}


main {
  color: black;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  width:100%;
  margin-left : auto;
  margin-right: auto;
}

main div {
  width: 100%;
  padding: 6rem 5rem;
}

h2 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: normal;
  margin-bottom: 6rem;
}
h1 {
  font-family: 'Ibarra Real Nova', serif;
  text-align: center;
  font-weight: 400;
  font-size: 3rem;
  text-transform: uppercase;
  margin-bottom: 6rem;
  letter-spacing: .1rem;
}

.right-page {
  margin-top: 0;
  padding-top: 0;
}
.right-page p {
  line-height: 1.4;
  text-align: justify;
  text-justify: inter-word;
}

.right-page p:first-letter {
    font-family: 'Ibarra Real Nova', serif;
    font-size: 4.5rem;
    float: left;
    margin-top: .5rem;
    margin-right: 1rem;
    line-height: .7;
}

.left-page {
    text-align: center;
    padding-top: 4rem;
}

.left-page small {
  font-style: italic;
}

.left-page img {
  max-width: 90%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


@media screen and (min-width: 900px) {
  main {
    flex-direction: row;
    with: 100%;
    max-width: 1800px;
  }
  main div {
    width: 50%;
  }
  .left-page {
    padding-top: 14rem;
  }
  .right-page {
    padding-top: 6rem;
    max-height: 100vh;
    height: 100vh;
  }
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> Old book Stories</title>
  <link href="https://fonts.googleapis.com/css?family=Gelasio:400,400i|Ibarra Real Nova&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<main>
  <div >
    <img src="https://www.oldbookillustrations.com/wp-content/uploads/2017/03/there-lonely.jpg"/>
    <small>But go there, lonely,<br>
At eventide,<br>
And hearken, hearken<br>
To the lisping tide.<br>
</small>
  </div>
  <div >
    <h2>[ 1 ]</h2>
    <h1>Depender</h1>
    <p>
      En cuanto a todas las cosas que existen en el mundo, unas dependen de nosotros,
otras no dependen de nosotros. De nosotros dependen; nuestras opiniones, nuestros
movimientos, nuestros deseos, nuestras inclinaciones, nuestras aversiones; en una
palabra, todas nuestras acciones.<br>
Así, ante toda fantasía perturbadora, está presto a decir: <i>“Tu no eres sino una
      imaginación, y en absoluto eres lo que parece”</i>, enseguida examínala con atención y
ponla a prueba, para ello sírvete de las reglas que tienes, principalmente con esta
primera que es, a saber : de si la cosa que te hace penar es del número de aquellas
que dependen de nosotros o de aquellas que no están en nuestro poder. Di sin
      titubear: <i>“Esa en nada me atañe”.</i>
    </p>
  </div>
</main>
<!-- partial -->
  
</body>
</html>

CodePudding user response：

Can you simply add the Previous and Next buttons at the footer or somewhere you'd prefer, and link to appropriate pages? Won't that be simple enough in your case?

<button onclick="location.href='https://google.com';">Previous</button>
<button onclick="location.href='https://facebook.com';">Next</button>

UPDATE

Since you have all pages in a div inside main, its pretty easy to traverse through the pages, get the div that is visible, and hide it, and show the next or previous page depending upon the button clicked :)

Here's a sample:

function changePage(prevOrNext) {
  var pages = document.getElementsByTagName('main')[0].children;
  for (let pageIndex = 0; pageIndex < pages.length; pageIndex  ) {
    if (pages[pageIndex].style.display == "block") {
      if (prevOrNext == 1 && pageIndex < pages.length - 1) {
        pages[pageIndex].style.display = "none"
        pages[pageIndex   1].style.display = "block"
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      } else if (prevOrNext == 0 && pageIndex > 0) {
        pages[pageIndex].style.display = "none"
        pages[pageIndex - 1].style.display = "block"
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      }
    }
  }
}

body {
  font-size: 18px;
  background: url("https://www.toptal.com/designers/subtlepatterns/patterns/groovepaper.png");
  font-family: 'Gelasio', serif;
}

main {
  color: black;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

main div {
  width: 100%;
  padding: 6rem 5rem;
  display: none
}

h2 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: normal;
  margin-bottom: 6rem;
}

h1 {
  font-family: 'Ibarra Real Nova', serif;
  text-align: center;
  font-weight: 400;
  font-size: 3rem;
  text-transform: uppercase;
  margin-bottom: 6rem;
  letter-spacing: .1rem;
}

.right-page {
  margin-top: 0;
  padding-top: 0;
}

.right-page p {
  line-height: 1.4;
  text-align: justify;
  text-justify: inter-word;
}

.right-page p:first-letter {
  font-family: 'Ibarra Real Nova', serif;
  font-size: 4.5rem;
  float: left;
  margin-top: .5rem;
  margin-right: 1rem;
  line-height: .7;
}

.left-page {
  text-align: center;
  padding-top: 4rem;
}

.left-page small {
  font-style: italic;
}

.left-page img {
  max-width: 90%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 900px) {
  main {
    flex-direction: row;
    with: 100%;
    max-width: 1800px;
  }
  main div {
    width: 50%;
  }
  .left-page {
    padding-top: 14rem;
  }
  .right-page {
    padding-top: 6rem;
    max-height: 100vh;
    height: 100vh;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title> Old book Stories</title>
  <link href="https://fonts.googleapis.com/css?family=Gelasio:400,400i|Ibarra Real Nova&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <main>
    <div  style="display: block">
      <img src="https://www.oldbookillustrations.com/wp-content/uploads/2017/03/there-lonely.jpg" />
      <small>But go there, lonely,<br>
At eventide,<br>
And hearken, hearken<br>
To the lisping tide.<br>
</small>
    </div>
    <div >
      <h2>[ 1 ]</h2>
      <h1>Depender</h1>
      <p>
        En cuanto a todas las cosas que existen en el mundo, unas dependen de nosotros, otras no dependen de nosotros. De nosotros dependen; nuestras opiniones, nuestros movimientos, nuestros deseos, nuestras inclinaciones, nuestras aversiones; en una palabra,
        todas nuestras acciones.<br> Así, ante toda fantasía perturbadora, está presto a decir: <i>“Tu no eres sino una
      imaginación, y en absoluto eres lo que parece”</i>, enseguida examínala con atención y ponla a prueba, para ello sírvete de las reglas que tienes, principalmente con esta primera que es, a saber : de si la cosa que te hace penar es del número de
        aquellas que dependen de nosotros o de aquellas que no están en nuestro poder. Di sin titubear: <i>“Esa en nada me atañe”.</i>
      </p>
    </div>
  </main>
  <!-- partial -->

</body>

<footer style="text-align: center">
  <button id="prev" onclick="changePage(0)">Previous</button>
  <button id="next" onclick="changePage(1)">Next</button>
</footer>

</html>