Enable bootstrap button using Javascript

Question

Collegues, i have а 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="acceptPmt()">Accept</button>
    </div>

and i have JavaScript function which should activate (enable) it:

    function activateAcceptButton() {
        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');
    }

When the function is called nothing changes. Could you please help me with button activation? How do i need to change js function? Thank you.

Nisarg Shah · Accepted Answer · 2018-01-13 12:00:55Z

1

You are using incorrect selector. document.getElementsByClassName('accept-btn') will select the div. Instead, you can directly refer to the button using the descendant selector (>). Your could use: document.querySelector('.accept-btn > button').

Also, instead of .removeClass(), you could use .classList.remove() on 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>

Alternatively, you can keep the selector as it is, and select the first child of the div. The commented statements in that function will also require being modified 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>

edited Jan 13, 2018 at 12:00

answered Jan 13, 2018 at 11:38

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Scott Hunter Over a year ago

Why shouldn’t removeClass be used?

Nisarg Shah Over a year ago

@ScottHunter Is it a native method on an element? I'm aware of jQuery API for removeClass. But the code here doesn't use jQuery.

May12 Over a year ago

Fisrt approach works fine. Thank you. But the second returns:

homepage.js:98 Uncaught (in promise) TypeError: Cannot read property '0' of undefined     at activateAcceptButton (homepage.js:98)     at buildTree (homepage.js:70)     at response.json.then.json (homepage.js:25)     at <anonymous>

Nisarg Shah Over a year ago

@May12 Fixed the second one. I missed that getElementsByClassName returns a collection of nodes, rather than a single node. So referring to the div using accBtn[0] should work.

May12 Over a year ago

@Nisarg Shah, yes, now every case works. The second variant is more clear for me. Thank you.

antelove · Accepted Answer · 2018-01-13 12:10:00Z

Using querySelector for bootstrap DOM in javascript

function activateAcceptButton() {
  /* selector class accept-btn of class btn,btn-warning,disable */
//  const accBtn = document.querySelector(".accept-btn [id=accept][type=button].btn.btn-warning.disabled");
  
  /* short */
  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 IE9 and earlier
  }  
}

<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="acceptPmt()">Accept</button>
</div>
    
<button onclick="activateAcceptButton()">Active</button>

CSS Selector for using querySelector

Collectives™ on Stack Overflow

Enable bootstrap button using Javascript

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related