`Switch up the backdrop upon selection`

Question

`Switch up the backdrop upon selection`

I'm experimenting with bootstrap and hit a roadblock. I have radio buttons that I want to outline when not selected, and appear solid or "btn-primary" when selected.

I could try achieving this with JavaScript by giving each button an individual ID, but there must be a more efficient way using JavaScript.

        <div class="row">
            <div class="col offset-md-2">
                <div class="form-group">
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
                        <button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
                        <button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
                        <button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
                        <button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
                        <button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
                        <button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
                    </div>      
                </div>
            </div>
        </div>

javascript bootstrap-4

Answer 1

Answer №1

If you're looking to achieve this functionality using only pure JavaScript, one approach would be to attach a click event handler to each element. This handler would then update the class of the element when the button is clicked:

var buttons = document.getElementsByTagName("button");

for (var i = 0; i < buttons.length; i++) {   

 buttons[i].onclick = function() {
    this.classList.remove('btn-outline-secondary');
    this.classList.add('btn-primary');
 }

}

.btn-outline-secondary {border: 1px solid #aaa;}
.btn-primary {border: 1px solid blue; background: blue; color: white;}

<div class="row">
  <div class="col offset-md-2">
    <div class="form-group">
      <div class="btn-group">
        <button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
        <button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
        <button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
        <button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
        <button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
        <button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
        <button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
      </div>
    </div>
  </div>
</div>

For additional resources and information on handling events without a framework and manipulating classes of elements, check out these answers.

An alternative method

If you're open to utilizing jQuery or similar libraries, implementing the event handler becomes much simpler. By incorporating the jQuery library into your project, the code could be condensed to:

$("button").click(function(){ /*apply new class using .removeClass() and .addClass() methods*/ });

Refer to jQuery documentation for further insights on the .click() method.

Answer 2

If you're looking to achieve this functionality using only pure JavaScript, one approach would be to attach a click event handler to each element. This handler would then update the class of the element when the button is clicked:

var buttons = document.getElementsByTagName("button");

for (var i = 0; i < buttons.length; i++) {   

 buttons[i].onclick = function() {
    this.classList.remove('btn-outline-secondary');
    this.classList.add('btn-primary');
 }

}

.btn-outline-secondary {border: 1px solid #aaa;}
.btn-primary {border: 1px solid blue; background: blue; color: white;}

<div class="row">
  <div class="col offset-md-2">
    <div class="form-group">
      <div class="btn-group">
        <button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
        <button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
        <button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
        <button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
        <button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
        <button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
        <button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
      </div>
    </div>
  </div>
</div>

For additional resources and information on handling events without a framework and manipulating classes of elements, check out these answers.

An alternative method

If you're open to utilizing jQuery or similar libraries, implementing the event handler becomes much simpler. By incorporating the jQuery library into your project, the code could be condensed to:

$("button").click(function(){ /*apply new class using .removeClass() and .addClass() methods*/ });

Refer to jQuery documentation for further insights on the .click() method.

Answer 3

Answer №2

const buttons = document.getElementsByTagName("button");

for (let i = 0; i < buttons.length; i++) {   
 buttons[i].onmouseover = function() {
    this.classList.remove('btn-outline-secondary');
    this.classList.add('btn-primary');
 }
 
 buttons[i].onmouseout = function() {
    this.classList.remove('btn-primary');
    this.classList.add('btn-outline-secondary');
 }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <div class="caontainer">
    <div class="row">
      <div class="col offset-md-2">
        <div class="form-group">
          <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
            <button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
            <button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
            <button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
            <button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
            <button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
            <button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
          </div>      
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Hopefully, this solution helps :)

Answer 4

const buttons = document.getElementsByTagName("button");

for (let i = 0; i < buttons.length; i++) {   
 buttons[i].onmouseover = function() {
    this.classList.remove('btn-outline-secondary');
    this.classList.add('btn-primary');
 }
 
 buttons[i].onmouseout = function() {
    this.classList.remove('btn-primary');
    this.classList.add('btn-outline-secondary');
 }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <div class="caontainer">
    <div class="row">
      <div class="col offset-md-2">
        <div class="form-group">
          <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
            <button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
            <button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
            <button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
            <button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
            <button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
            <button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
          </div>      
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Hopefully, this solution helps :)

`Switch up the backdrop upon selection`

Answer №1

An alternative method

Answer №2

Similar questions

The issue with importing data into Google Sheets due to an error with Ljava

Steps to fix the error message "Unable to access properties of null (reading 'toLowerCase')"

Difficulty in implementing a radio button selection form using Django and Bootstrap styles

Is utilizing the "sandbox attribute for iframes" a secure practice?

I possess a JSON object retrieved from Drafter, and my sole interest lies in extracting the schema from it

A glitch in showcasing the hello world example in Node.js with express

Incorporating TWEEN for camera position animations: A complete guide

React Functional Component fails to update on state changes

Guide to updating passwords with passport-local-mongoose

Angular file upload component with customizable file size limits

Siblings are equipped with the advanced selector feature to

Mocha Test Runs Are Exceeding Time Limits

What steps can be taken to update the cart if all products have been removed?

Adding embedded attributes from a different object

Creating a layout with cards positioned next to each other using Bootstrap

Grouping emitted events using RxJS in a Node.js environment

Issue with Node.js MongoDb query results in the retrieval of all documents instead of the specific

Having difficulty retrieving keys from a JSON object returned by a mongoose findOne() query

Creating immersive 3D graphics using Three.js

"Enhance Your Website with Custom jQuery Preloaders