Question 43415 in Html Question posted in
Some basic documentation can be found here.

How to make the next and prev buttons to go the next section and the previous one in html using JavaScript

I’m trying to build the next and prev buttons to switch between sections on the same page in HTML using JavaScript

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  color: #343a40;
}

.nav{
    background-color: orange;
top:0;
  lef:0;
    position: fixed;

}
#section-1{
height:100vh;
background-color:green;
}

#section-2{
height:100vh;
background-color:red;
}
#section-3{
height:100vh;
 background-color:blue;
}
<section id="section-1">
  <!-- content of section 1 -->
</section>

<section id="section-2">
  <!-- content of section 2 -->
</section>

<section id="section-3">
  <!-- content of section 3 -->
</section>

<div class="nav">
  
<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>
<button id="reset-btn">home</button>
</div>

I tried to make a counter to change the sections when the button clicked to go to the next one but it didn’t work

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for your answers it's inspiring me to come up with this solution

    const prevBtn = document.getElementById("prev-btn");
const nextBtn = document.getElementById("next-btn");
const sections = document.querySelectorAll("section");
const resetBtn = document.getElementById("reset-btn");

let currentSectionIndex = 0;

resetBtn.addEventListener("click", () => {
  currentSectionIndex = 0;
  sections[currentSectionIndex].scrollIntoView({ behavior: "smooth" });
});

prevBtn.addEventListener("click", () => {
  if (currentSectionIndex > 0) {
    currentSectionIndex--;
    sections[currentSectionIndex].scrollIntoView({ behavior: "smooth" });
  }
});

nextBtn.addEventListener("click", () => {
  if (currentSectionIndex < sections.length - 1) {
    currentSectionIndex++
    sections[currentSectionIndex].scrollIntoView({ behavior: "smooth" });
  }
});
    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  color: #343a40;
}

.nav{
    background-color: orange;
top:0;
  lef:0;
    position: fixed;

}
#section-1{
height:100vh;
background-color:green;
}

#section-2{
height:100vh;
background-color:red;
}
#section-3{
height:100vh;
 background-color:blue;
}
    <section id="section-1">
  <!-- content of section 1 -->
</section>

<section id="section-2">
  <!-- content of section 2 -->
</section>

<section id="section-3">
  <!-- content of section 3 -->
</section>

<div class="nav">
  
<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>
<button id="reset-btn">home</button>
</div>


  2. 0

    Method 1: Create separate pages for the sections, and make the buttons links.

    Method 2: Make an array of backticked strings that contain HTML data for each section per string, and let the buttons change the page data as per the array. The previous button would update the page with the previous array element’s data, and the next button would update the page with the next array element’s data.

    Login or Signup to reply.
  3. 0

    Html code

    <section id="section-1">
  <!-- content of section 1 -->
</section>

<section id="section-2">
  <!-- content of section 2 -->
</section>

<section id="section-3">
  <!-- content of section 3 -->
</section>


<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>

    JavaScript code

    
// get references to the buttons and sections
const prevBtn = document.getElementById("prev-btn");
const nextBtn = document.getElementById("next-btn");
const sections = document.querySelectorAll("section");

// initialize a variable to keep track of the current section
let currentSectionIndex = 0;

// add event listeners to the buttons
prevBtn.addEventListener("click", () => {
  // move to the previous section (if there is one)
  if (currentSectionIndex > 0) {
    currentSectionIndex--;
    sections[currentSectionIndex].scrollIntoView({ behavior: "smooth" });
  }
});

nextBtn.addEventListener("click", () => {
  // move to the next section (if there is one)
  if (currentSectionIndex < sections.length - 1) {
    currentSectionIndex++;
   
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search