Changing button color on click JavaScript

Question

JavaScript:

var acc = document.getElementsByClassName("togglebtn"),
    i;
for (i = 0; i < acc.length; i++) {
   acc[i].onclick = function () {
       this.classList.toggle("active");                               
   }
}

html:

<md-button class="md-fab togglebtn"></md-button>

css:

button.togglebtn:after {
   background-color: white;
   width: auto;
   font-weight: bold;
   margin-left: 5px;
   border: none;
   content:'';
}

button.togglebtn.active:after {
   width: auto;
   background-color: green;
   content:'close';
   font-size: 10px;
}

I am only able to change the color of the text but not the background color. I am trying to change the color when someone click on button. The :after is working in css but changing color is not working. Can someone suggest me, what I am doing wrong please

As you are using AngularJS, it may be better to do it the Angular way. See my answer. — Mistalis
– Mistalis, Commented Aug 30, 2017 at 12:47

user8317956 · Accepted Answer · 2017-08-30 11:36:55Z

3

var acc = document.getElementsByClassName("togglebtn");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
  }
}

button.togglebtn.active {
  background-color: green;
  color: #fff;
}

<button class="md-fab togglebtn">hello</button>

answered Aug 30, 2017 at 11:36

user8317956

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

2 Comments

danny Over a year ago

this is working fine but my button changing the width

user8317956 Over a year ago

Give some fixed width.. It'll fix your problem, Remove width: auto on active

Govind Samrow · Accepted Answer · 2017-08-30 11:57:15Z

1

Its just a CSS problem ,you are trying to set style of after but you need to set style of button and after separately:

var acc = document.getElementsByClassName("togglebtn"),
  i;
for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
  }
}

button.togglebtn:after {
  content: '';
}

button.togglebtn.active:after {
  content: 'close';
}

button.togglebtn {
  background-color: white;
  width: auto;
  font-weight: bold;
  margin-left: 5px;
  border: none;
}

button.togglebtn.active {
  width: auto;
  background-color: green;
  content: ' close';
  font-size: 10px;
}

<button class="md-fab togglebtn">hello</button>

answered Aug 30, 2017 at 11:57

Govind Samrow

10.2k14 gold badges59 silver badges90 bronze badges

2 Comments

danny Over a year ago

thats what i am doing but I am not able to change the color though

Govind Samrow Over a year ago

No,In addition I've added css for button.togglebtn and button.togglebtn.active

Mistalis · Accepted Answer · 2017-08-30 11:44:15Z

1

As you are using AngularJS, I would suggest you to use ng-class instead of plain JavaScript:

var myApp = angular.module('myApp', []);

.active { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
    <button ng-class="{active: isActive}" ng-click="isActive =! isActive">Hello</button>
</div>

answered Aug 30, 2017 at 11:44

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

1 Comment

danny Over a year ago

I tried to create ng-class and set it up on ng click but its not functioning correctly. I also have another function on ng-click

danny · Accepted Answer · 2017-08-30 14:27:25Z

0

     .md-button.md-fab {
      line-height: 1% !important;
      min-width: 0;
      border-radius: 50%;
      position: fixed;
      margin-left: 400px;
      background-color: green;
      margin-top: -7px;
      }
      button.togglebtn:after {
        color: white;
        width: auto;
        margin-left: 5px;
        border: none;
        content:'open';
        font-size: 10px;

    }

button.togglebtn.active:after {
    width: auto;
    color: black;
    content:'close';
    font-size: 10px;
}

.md-button.md-fab {
    background-color: black !important;
}
.md-button.md-fab.active{
    background-color: yellow !important;
    content: 'yellow';
    color: white;
}

answered Aug 30, 2017 at 14:27

danny

2611 silver badge12 bronze badges

Collectives™ on Stack Overflow

Changing button color on click JavaScript

4 Answers 4

2 Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related