What is the best way to incorporate a set of buttons and dynamically update them by using next and previous buttons?

Currently, I have code for two sets of buttons. How can we add functionality for next and previous buttons?

   <div id="chart-section-wrapper" class="container">
    <div id="chart-section">
        <div class="overall-btns col my-3">
        <!-- Buttons -->  
            <!-- set-1 -->           
            <button class="selector-button" name="button-default-1">
                <i class="icon bi bi-droplet-half"></i><span>Albanian</span>
            </button>          
        
            <button class="selector-button" name="button-default-2">
                <i class="icon bi bi-droplet-half"></i><span>Arabic</span>
            </button>          
       
            <button class="selector-button" name="button-default-3">
                <i class="icon bi bi-droplet-half"></i><span>Armenian</span>
            </button>        
      
             <!-- set-2 --> 
            <button class="selector-button" name="button-default-4">
                <i class="icon bi bi-droplet-half"></i><span>Azerbaijani</span>
            </button>
             <button class="selector-button" name="button-default-4">
                <i class="icon bi bi-droplet-half"></i><span>Azerbaijani</span>
            </button>
            <button class="selector-button" name="button-default-4">
                <i class="icon bi bi-droplet-half"></i><span>Azerbaijani</span>
            </button>
        
          <!-- Next and Previous buttons -->      
        <div class="next-button-parent text-right mb-3 col-3">
            <button class="next-button" id="next-button">Next </button>
        </div>
         <div class="next-button-parent text-right mb-3 col-3">
            <button class="next-button" id="next-button">Prev </button>
        </div>
    </div>
</div>

How can I implement a functionality where clicking on the next button will display set-2 buttons, and clicking on the previous button will display set-1 buttons?

javascriptcssbootstrap-4

Answer №1

While not the most elegant solution, this code snippet can give you a good starting point on how to tackle the issue: https://codepen.io/chri_joh/pen/wvgXQgx

var current_position = 1;
var max_blocks = 2;

function show_button_set(direction){
  if(direction === '+'){
    current_position += 1;
    if(current_position > max_blocks) current_position = 1;
  } else {
    current_position -= 1;
    if(current_position < 1) current_position = max_blocks;
  }
  
  document.getElementById('buttonset1').style.display = 'none';
  document.getElementById('buttonset2').style.display = 'none';
  document.getElementById('buttonset'+current_position).style.display = 'block';
}

In this solution, I've wrapped the two button blocks and designed it to be easily expandable with more blocks.

Answer №2

If you want to display set 1 when the next button is clicked and set 2 when the previous button is clicked, you can update your HTML like this:

      
    <div class="next-button-parent text-right mb-3 col-3">
        <button onclick="show_button_set('1')" class="next-button" id="next-button">Next </button>
    </div>
    
    <div class="next-button-parent text-right mb-3 col-3">
        <button onclick="show_button_set('2')" class="next-button" id="next-button">Prev </button>
    </div>

Include the following script:

function show_button_set(set){
  document.getElementById('buttonset1').style.display = set==1? 'block':'none';
  document.getElementById('buttonset2').style.display = set==2? 'block':'none';
}

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

What are some ways to enhance the speed of swipe and scrolling on mobile devices using Javascript, CSS, and HTML?

Dealing with slow scrolling on iPhones has been a challenge for me. The application was developed using Vue.js. I was able to increase the scrolling speed on desktop using Javascript, but unfortunately, it doesn't translate well to mobile devices due ...

javascripthtmlcssvue.js

What is the best way to validate the body object when working with Actions2 in sails.js?

Just starting out with sails.js I understand that the inputs object allows actions2 to validate the request parameters. However, how can I access and validate the request body? For example, req.body. I know I can access this from this.req.body, but I was ...

javascriptnode.jsapisails.js

Unable to Utilize Custom Colors in Tailwind CSS within NextJS

I am currently experimenting with NextJs and Tailwinds CSS for a new project. However, I keep encountering an error when attempting to apply a custom background color: Failed to compile ./styles/globals.css:7:12 Syntax error: /Users/anishkunapareddy/Deskto ...

cssreactjscolorsnext.jstailwind-css

Discovering an Uncaught TypeError: Unable to access the property 'length' of an undefined value

Looking to implement a function that checks the status of the cart and displays output accordingly. The logic is as follows: If the cart is empty (cart.line_items.length returns false), then the EmptyCart function should be executed. The "line_items" var ...

javascriptmaterial-uijsx

Error encountered: StaleElementReferenceError during loop traversal

In my application, I retrieve a list of IDs from the database. I then use a cursor to iterate over these IDs and for each one, I insert it into a URL using Selenium to retrieve specific items from a webpage. This process involves searching for a keyword an ...

javascriptnode.jsseleniumselenium-webdriver

What is the best way to retrieve a JSON element obtained from a Parse.com query?

I'm encountering difficulties when attempting to access a specific JSON element that I receive in response from a query made into a Parse.com Class. Despite reading through various questions and answers on similar topics, I have yet to find a solutio ...

javascriptjsonparse-platform

Text area featuring unique border design, with border color change upon focus?

Currently, I have a text area with borders that are designed in a unique way. However, I am looking to change the border color when the user focuses on the text area. Do you have any suggestions on how I can achieve this effect without affecting the curre ...

javascriptjqueryhtmlcssfrontend

In JavaScript, there is a missing piece of logic when iterating through an array to find

I am working on a solution to populate empty values when data is not available for specific months. You can view my progress on Plunker here: http://plnkr.co/edit/f0IklkUfX8tkRZrn2enx?p=preview $scope.year = [ {"month":"mar", "val":"23"}, {"month":"feb", ...

javascriptarraysangularjs

Issue Alert: React - Material-UI version 6 does not support renderInput Property in DesktopDatePicker

Exploring the integration of React with Material UI Version 6 Library, I am looking to personalize the appearance of the rendered Input. In the previous version, Version 5, there was a property called "inputProp" for DateTimePicker. However, this feature ...

javascriptreactjsmaterial-ui

Looking to place a global filter outside the primeNG table component?

I am currently utilizing primeNG in my project and I have a need to incorporate a global filter. The challenge I am facing is that I must add this filter in a different component. These two components are deeply nested within other components. My approach ...

javascriptangularprimengprimeng-datatable

Arranging and overlaying images with HTML and CSS

Currently, I am in the process of developing a simplistic game through the use of HTML and CSS. The game consists of a background image portraying an alleyway, and my objective is to incorporate additional images on top of this background as clues within t ...

htmlcssz-index

Tips for positioning an image at the center of a div element

How can I properly center an image in the middle of a div? <div class="main"> <img...> </div> In the code snippet below, the image is centered, but not perfectly in the middle. https://jsfiddle.net/web_garaux/tng7db0k/ ...

htmlcsspositionvertical-alignment

Is there a way to determine the distance in miles and feet between various sets of latitude and longitude coordinates?

I am working with an array of latitude and longitude coordinates and I am looking to use JavaScript or Typescript to calculate the distance in miles and feet between these points. const latsLngs = [ { lat: 40.78340415946297, lng: -73.971427388 ...

javascriptangulartypescript

Obtaining POST request parameters in an Express server

Below is the code snippet for adding a product using an angular service. The product is passed as the body. addProduct(product): Observable<any> { return this.http.post<Observable<any>>( `http://localhost:4401/api/products`, ...

javascriptnode.jsangular

The Proper Method of Displaying Data from a JSON File Using AngularJS

I'm having trouble getting the data from a JSON file (click on the "Json File" link to view the structure). I'm not sure what to put after "$Scope.listOfRecipe=". I tried using response.data.recipes, but it's not working and causing errors. ...

javascriptangularjsjson

Tips for confirming a sub string is present in an array using JavaScript/TScript

I am currently testing for the presence of a SubString within an array. In my test, I am asserting using: expect(classList).toContain('Rail__focused') However, I encountered the following error: Error: expect(received).toContain(expected // inde ...

javascripttypescriptwebdriver-io

Update and republish an outdated npm package

After successfully publishing an npm package, I attempted to make an update which unfortunately resulted in some issues. It seems that I made a mistake during the build process. Since it had been a year since my last update, I have forgotten the exact step ...

javascriptnode.jsnpm

Are there problems with the response values of functions that can handle varying object interfaces?

Currently in the process of developing a command line blackjack app with Node and Typescript, even though I am relatively new to Typescript. My main challenge lies in implementing interfaces for player and dealer objects, as well as creating functions that ...

javascriptnode.jstypescripttypescript-genericstypescript-eslint

How to fix the Uncaught TypeError: Unable to access the 'open' property of an undefined value in the AppBar + Drawer component with ReactJS and Material-UI?

I'm currently working on implementing the navigation feature in my app using Material-UI framework. I want the default hamburger icon on the left side of the AppBar to open the Drawer component when clicked. However, I keep encountering an error that ...

javascriptreactjsdrawermaterial-uiappbar

applying multiple conditions to filter data in javascript

I have been working on filtering data based on input, and it is functioning well. However, I am looking to add an additional condition to the filter. I want it to return if either the title or another value (such as sendFrom) is provided. const newData = ...

javascriptreactjsfiltering