Creating a Set of Buttons in HTML

Need some assistance with grouped buttons. Let's consider a scenario where there are 5 buttons on an HTML page. When the 3rd button is clicked, buttons from 0 to 3 should change color and the function should return 3. Similarly, when the 5th button is clicked, buttons from 0 to 5 should change color and return 5 using JavaScript.

Thank you in advance!

Answer №1

To achieve this, you may need to utilize scripts (although there are other simple methods available). Below is an implementation using jQuery.

Using jQuery, you can select all previous siblings with prevAll() and include the clicked button itself with andSelf(). Here is a basic example as no code was provided.

$('.btn').click(function() {
  $(this).prevAll('.btn').andSelf().addClass('bg-red');
  $(this).nextAll('.btn').removeClass('bg-red');
  console.log($(this).data('value'));
});
.bg-red{
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn" value="button 1" data-value="1">
<input type="button" class="btn" value="button 2" data-value="2">
<input type="button" class="btn" value="button 3" data-value="3">
<input type="button" class="btn" value="button 4" data-value="4">
<input type="button" class="btn" value="button 5" data-value="5">

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

How to incorporate an SVG line between two divs within a flexbox arrangement

<div class='container'> <div class='Greeting'> Hello there this is B </div> <div class='banana'> Hello B </div> </div> .container{ display: flex; width: 100%; ...

Arranging multi-level array with distinct keys and values

Users have the ability to add custom fields on a form. Note: I am looking for ways to streamline and organize the code more efficiently, with further explanations to follow. The HTML structure has been simplified for clarity: <form action="" method=" ...

Unable to find the solution for 'material-ui/Button'

I recently encountered an issue while trying to integrate the material-ui library into my existing React project. I used the command npm install --save material-ui, but it resulted in an error upon running it. The error message received is as follows: ...

Interactive Bar chart updates in real-time with Highcharts and AngularJs

With the help of a sample from Highcharts (here), I successfully integrated a bar chart into AngularJs. Below is the HTML code: <!DOCTYPE html> <html ng-lang="en" ng-app="myModule"> <head> <meta charset="ISO-8859-1"> <script sr ...

Grunt Pokes at XML to Set a Variable Destination Name

When using grunt-xmlpoke to update an XML file, the path of the XML file is provided as a parameter. The issue arises when the first WebConfigPath (key) in the files section is interpreted as a string. This results in updating a local copy of the XML fil ...

How to Determine If a String Represents an HTML Tag Using jQuery

Checking if a string is an HTML tag can be tricky. I've tried various methods found on Google, but none have been successful so far: var v = $(string).html() ? 1 : 0; --or---------------------------------------------- var htmlExpr = new RegExp("/^( ...

Create a new button dynamically within an HTML table row using pure JavaScript programming techniques

Currently, I am retrieving JSON data from an API and then displaying this data in an HTML table using plain JavaScript. My goal is to dynamically add a button at the end of each row for additional functionality, but so far, I have been unable to figure out ...

What causes the accordion class to activate panels with varying names?

Why are some of my accordions triggering other accordions when they have different names? I've been working on resolving the issue where opening the second accordion in the second, third, or fourth panel closes the second accordion in the first panel ...

Using Axios to Integrate an API - Displaying a Username and Password Pop-up

I have been given a project that involves API integration. I have successfully retrieved data from the API, but there is a pop-up appearing asking for a username and password. Although I have these credentials, I would like to log in without that pop-up ap ...

Guide to incorporating vertical scrolling for a grid of items in Material UI

Is there a way to implement vertical scrolling in a grid container so that when the height of components exceeds a certain maximum, they can be scrolled through vertically? ...

Could you explain the distinction between these two arrow functions?

I'm puzzled about why the second arrow function is effective while the first one isn't. //the first one doesn't function properly this.setState = () => { text: e.target.value, }; //in contrast, this one ...

Guide on utilizing JSON data sent through Express res.render in a public JavaScript file

Thank you in advance for your assistance. I have a question that has been on my mind and it seems quite straightforward. When making an app.get request, I am fetching data from an external API using Express, and then sending both the JSON data and a Jade ...

Navigating through information using Axios in React JS

Issue Currently, I am facing a challenge while trying to iterate through the data retrieved from an API call using Axios in a React.js application. The response is successfully received, but I am encountering difficulties when trying to display the inform ...

CSS: positioning controls at opposite ends of a table cell

I need help with styling a button and textbox inside a table cell. Currently, the button is stuck to the textbox, but I want them positioned at opposite ends of the cell. How can I achieve this? <td style= "width:300px"> <asp:TextBox ID="Tex ...

What could be the reason for the lack of responsiveness in my input box?

http://jsfiddle.net/4ws3L6kn/1/ Can anyone help me figure out why this isn't responsive? What mistake did I make? <div id="DIV_1"> <div id="DIV_2"> <div id="DIV_3"> <button id="BUTTON_4"> ...

Achieving bottom alignment for a button in Bootstrap 4

<div class="row"> <div class="col-lg-3 col-md-6 col-11 d-flex flex-column text-center ng-star-inserted"> <div class="card prcard"> <img height="200px" alt="Card image cap" class="card-img-top mx-auto d-block" ...

Accessing the `this` element in ES6 after binding to the class

Is there a way to retrieve and interact with this element after applying the this class? For instance, when not using this: $(".button-open").click(function(event) { console.log(this); // <a href="#" class="button-open">Open</a> this. ...

Multiple Button Triggered jQuery Ajax Function

I'm currently working on a project where I retrieve data from MySQL to create 4 buttons. I am using jQuery/ajax to trigger an event when any of the buttons are clicked. However, only the first button seems to be functioning properly, while the other t ...

Strategies for quickly landing in top Google search results

I run a website for classified ads... Whenever users post a new ad, it gets automatically included in our dynamic sitemap (xml). Our sitemaps were submitted to Google via Webmaster Tools about two months ago. While some of the ads are indexed, it is tak ...

Tips for organizing and concealing images within a Div for seamless transitions (no need for floats)

Currently, I am working on a grid layout for my website. My goal is to have 9 images load quickly, and then once the page has loaded, I want to fetch additional images, insert them into the image containers, and animate between them. While I understand how ...