Activate Bootstrap button functionality with JavaScript

Question

Activate Bootstrap button functionality with JavaScript

Hey team, I've got a Bootstrap button on my HTML page:

.....
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
...

    <div class="accept-btn">
      <button type="button" class="btn btn-warning disabled" onclick="activatePmt()">Accept</button>
    </div>

I also have a JavaScript function that is supposed to activate (enable) it:

    function activatePaymentButton() {
        const accBtn = document.getElementsByClassName('accept-btn');
        //accBtn[0].disabled = false;
        //accBtn[0].classList.add('accept-btn-vis');
        //accBtn[0].setProperty("disabled", false);
        //accBtn[0].style.setProperty("enable", true);

        accBtn[0].removeClass('disabled');
    }

However, when the function is called, nothing happens. Can you assist me in activating the button? What modifications should I make to the JS function? Thank you.

javascript html css twitter-bootstrap

Answer 1

Answer №1

You might want to consider using a different selector. Instead of

document.getElementsByClassName('accept-btn')

, try specifying the button directly with the descendant selector (>) like this:

document.querySelector('.accept-btn > button')

.

Another suggestion is to use .classList.remove() instead of .removeClass() when modifying the button.

function activateAcceptButton() {
  const accBtn = document.querySelector('.accept-btn > button');
  accBtn.classList.remove('disabled');
}

function acceptPmt() {}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> ...

<div class="accept-btn">
  <button type="button" class="btn btn-warning disabled" onclick="acceptPmt()">Accept</button>
</div>


<button onclick="activateAcceptButton()">Activate</button>

If you prefer, you can stick with the original selector and select the first child of the div. Just make sure to adjust the commented lines in your function accordingly:

function activateAcceptButton() {
  const accBtn = document.getElementsByClassName('accept-btn');
  accBtn[0].children[0].classList.remove('disabled');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> ...

<div class="accept-btn">
  <button type="button" class="btn btn-warning disabled" onclick="acceptPmt()">Accept</button>
</div>


<button onclick="activateAcceptButton()">Activate</button>

Answer 2

You might want to consider using a different selector. Instead of

document.getElementsByClassName('accept-btn')

, try specifying the button directly with the descendant selector (>) like this:

document.querySelector('.accept-btn > button')

.

Another suggestion is to use .classList.remove() instead of .removeClass() when modifying the button.

function activateAcceptButton() {
  const accBtn = document.querySelector('.accept-btn > button');
  accBtn.classList.remove('disabled');
}

function acceptPmt() {}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> ...

<div class="accept-btn">
  <button type="button" class="btn btn-warning disabled" onclick="acceptPmt()">Accept</button>
</div>


<button onclick="activateAcceptButton()">Activate</button>

If you prefer, you can stick with the original selector and select the first child of the div. Just make sure to adjust the commented lines in your function accordingly:

function activateAcceptButton() {
  const accBtn = document.getElementsByClassName('accept-btn');
  accBtn[0].children[0].classList.remove('disabled');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> ...

<div class="accept-btn">
  <button type="button" class="btn btn-warning disabled" onclick="acceptPmt()">Accept</button>
</div>


<button onclick="activateAcceptButton()">Activate</button>

Answer 3

Answer №2

Implementing querySelector for Bootstrap Elements in JavaScript

function updateAcceptButton() {
  /* Selects the element with classes accept-btn and btn,btn-warning,disabled */
//  const accBtn = document.querySelector(".accept-btn [id=accept][type=button].btn.btn-warning.disabled");
  
  /* Simplified version */
  const accBtn = document.querySelector(".accept-btn [id=accept]");

  if (accBtn.classList) { 
    accBtn.classList.remove("disabled");
  } else {
    accBtn.className = accBtn.className.replace(/\bmydisabled\b/g, ""); // For older versions of IE
  }  
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="accept-btn">
  <button id="accept" type="button" class="btn btn-warning disabled" onclick="acceptPayment()">Accept</button>
</div>
    
<button onclick="updateAcceptButton()">Activate</button>

CSS Selector Reference Guide for querySelector Usage

Answer 4

Implementing querySelector for Bootstrap Elements in JavaScript

function updateAcceptButton() {
  /* Selects the element with classes accept-btn and btn,btn-warning,disabled */
//  const accBtn = document.querySelector(".accept-btn [id=accept][type=button].btn.btn-warning.disabled");
  
  /* Simplified version */
  const accBtn = document.querySelector(".accept-btn [id=accept]");

  if (accBtn.classList) { 
    accBtn.classList.remove("disabled");
  } else {
    accBtn.className = accBtn.className.replace(/\bmydisabled\b/g, ""); // For older versions of IE
  }  
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="accept-btn">
  <button id="accept" type="button" class="btn btn-warning disabled" onclick="acceptPayment()">Accept</button>
</div>
    
<button onclick="updateAcceptButton()">Activate</button>

CSS Selector Reference Guide for querySelector Usage

Activate Bootstrap button functionality with JavaScript

Answer №1

Answer №2

Similar questions

What steps should I follow to properly set up my tsconfig.json in order to ensure that only the essential files are included when executing npm run build

Achieving a Transparent Flash overlay on a website without hindering its usability (attention, interaction, form submissions, etc.)

JS Emphasis on Scrolling Div

Tips for extracting the index of the chosen item from a dropdown using ReactJs and Material UI

What could be the reason for the mismatch in size between the downloaded file in Express.js and the file size on the server?

What is the best way to extract just the hours and minutes from a timestamp column that includes hours, minutes, and seconds in my dataset and create a new column

Eliminate Quotation Marks and Commas in String Data Using React

A specialized WordPress template that loads just the header and footer

The Ajax success callback is failing to update the background-image property after receiving a successful JSON response

Dealing with asynchronous data using mermaid-js in Angular

The Fusion of Ember.js and Socket.io: Revolutionizing Web

How can I center-align images in WordPress?

Using QuerySelector with Angular Directive will throw an error as it is not a recognized

Utilize HTML to pre-load a font and incorporate it into your CSS styling

Combining classes in SCSS to create more versatile styles

What is the best way to manage an empty JavaScript object?

Close overlay panel in PrimeFaces calendar

If the table spans multiple pages, a top margin will be added to ensure proper formatting. This feature is implemented using jspdf-autotable

Leveraging node.js for website development

Tips for creating an endless scrolling/loader feature in Nuxt?