I am developing a quiz application using JavaScript, and I am wondering how I can smoothly transition from one question to the

I'm working on developing a quiz application and I'm facing an issue where my quiz is skipping question 2 when moving from one question to the next using the "next" button. I have a total of 3 questions in my quiz and for some reason, it jumps from question 1 to question 3 without displaying question 2. I would greatly appreciate any assistance or tips on how to fix this problem. You can view my code on CodePen via the following link: https://codepen.io/Michaelm4100/pen/GRQxNQO?editors=1011

// Function to toggle active-question class for each question 
function activeQuestion(el) {
   var que = document.getElementsByClassName('question');

    for (var questions of que) {
      // console.log(questions)
      
      // Remove active-question class 
      questions.classList.remove('active-question');
    }
    questions.classList.add('active-question');
}


var nextButton = document.getElementsByClassName('nxt-btn'); 


for (var buttons of nextButton) 
  
  buttons.addEventListener('click', function(e){
    // Call the active Question function on button click event 
    activeQuestion(e);
  })
}

Answer №1

When looping through elements using var questions of que, the final value of questions will be the last element. This means that if you try to add a class with

questions.classList.add('active-question')
after the loop, it will always target the final element.

To fix this issue, maintain an index variable to keep track of the active question at any given time.

const questions = document.querySelectorAll('.question');
let activeQuestionIndex = 0;
for (const nextButton of document.getElementsByClassName('nxt-btn')) {
    nextButton.addEventListener('click', () => {
        questions[activeQuestionIndex].classList.remove('active-question');
        activeQuestionIndex++;
        questions[activeQuestionIndex]?.classList.add('active-question');
    });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring through angular.js with the use of identifiers

In my data, I have two JSON objects: all_users "all_users": { "4":{ "user_id":4, "user_name":"Miranda" }, "7":{ "user_id":7, "user_name":"seconduser" } And tickets "tickets": [{ "ticket_id" : 12, "created_by" : ...

The React Component has been displayed on the screen a total of 5 times within the Ionic

While working on my app that includes a dashboard to display data, I noticed in Chrome's console that the render method is being called 5 times. This results in an annoying bouncing effect when the app page is re-rendered. How can I prevent the render ...

Sending a javascript variable to an angularjs scope

Currently, I am utilizing Flask to render an HTML template and wish to transfer the variable add_html_data, which is passed via Flask's render_template, to the scope of an AngularJS controller. I have attempted the following: <body> <di ...

What is the best way to showcase Vue data of a selected element from a v-for loop in a

Here is an example of how my json data is structured. I have multiple elements being displayed in a v-for loop, and when one is clicked, I want to show specific information from that element in a modal. [{ "id": 1, "companyNa ...

Is there a way to adjust the font size of a select option?

Looking to customize the appearance of a select option dropdown list. Wondering if it's possible to change the font sizes of individual options rather than keeping them all the same? For instance, having the default: -- Select Country -- displayed a ...

Transform the API response array into a different format, ready to be passed as a prop to a

Looking to incorporate the Vue Flipbook component into my project, which requires an array of image URLs for the "pages" prop. I am fetching post responses from the WordPress REST API. My goal is to extract the "image" property from the response array and ...

Creating a webpage header with Javascript to mimic an existing design

I am in the process of building a website with 5 different pages, but I want the header to remain consistent across all pages. To achieve this, I plan to use an external JavaScript file (.js). The header includes the website name (displayed as an image) an ...

Achieving Perfect Alignment in Dreamweaver: Crafting a Stylish Header Container

Hello, I am currently working on a Dreamweaver site and have created a CSS style sheet within my template that includes a div tag called #HeaderBox. My goal is to make this box 40% of the screen's size, with specific pixel dimensions if necessary. I a ...

What is the correct way to define the onClick event in a React component?

I have been encountering an issue while trying to implement an onClick event in React using tsx. The flexbox and button are being correctly displayed, but I am facing a problem with the onClick event in vscode. I have tried several ideas from the stack com ...

What is the best way to display recently added information?

I'm curious about why the newly added data isn't showing up in the template, even though it does appear when using console.log (check out ViewPost.vue). After adding a new post, this is the result: result.png. Does anyone know how to fix this? ...

The uploading of a file in NodeJS is not possible as the connection was closed prematurely

When I created a website using nodejs, there was a specific page for uploading images to the server. It worked perfectly fine when tested on my computer. However, upon deploying it to the server, the upload functionality stopped working. Upon checking the ...

What is the best way to incorporate a dynamic background in NextJS using Tailwind?

I have a poster image that I want to use as a background image, fetched from MovieDb. I tried putting it inside the className like this: className={bg-[url('${path}')] h-screen bg-cover bg-center text-white border-b-8 border-b-solid border-b-sla ...

Events Unavailable for Viewing - Full Calendar - Database Error Encountered

I am currently developing a calendar application. While I have managed to successfully display the calendar and add events, I am facing an issue with displaying events on the monthly view. Here is a snippet of the HTML code being used: <head> &l ...

Position two in-line divs at the bottom, one on each side

I am in search of a way to dynamically position two elements at the bottom of a container, making sure they are at opposite corners. Much like how the Stackoverflow Logo and the Ask Question are aligned at the bottom but on different ends of their containe ...

What are the steps to transition from @zeit/next-sass deprecation?

Is there a way to transition and modify the next.config.js file to switch from using @zeit/next-sass to leveraging Next.js's built-in support for Sass? Check out this link for more information: https://www.npmjs.com/package/@zeit/next-sass const withS ...

Having trouble getting Firestore/Firebase to work with Next.js?

Hey everyone, I could really use some help here. I've been working on integrating Firebase into my Next.js app for the API. Everything works well when I build and run locally, but once I deploy to Vercel for production, I encounter a 500 - Internal S ...

Click on a specific date on the calendar in the Javascript Django application to retrieve items based on

I'm currently working on a calendar application using JavaScript and Django. I am struggling to figure out how to display items based on the selected date when clicking on a day. Is there anyone who can suggest a solution? My assumption is that I may ...

Exploring the function.caller in Node.js

Currently, I have a task that relies on function.caller to verify the authorization of a caller. After reviewing this webpage, it seems that caller is compatible with all major browsers and my unit tests are successful: https://developer.mozilla.org/en-U ...

Show dynamic HTML Dropdowns with nested JSON data

I've been racking my brains trying to implement this specific functionality in the UI using a combination of HTML5, Bootstrap, CSS, and JavaScript. My goal is to create dropdown menus in the UI by parsing JSON input data. Please Note: The keys withi ...

Bizarre Drop-down Peculiarities

Having a perplexing issue where the 'search' list item is oddly shifted below the dropdown box only when it is displayed. The other list items remain in their correct positions. Any advice on how to resolve this? The appearance and functionality ...