Modifying button appearance upon clicking using JavaScript

Question

Modifying button appearance upon clicking using JavaScript

JavaScript:

const buttons = document.getElementsByClassName("togglebtn");
for (let i = 0; i < buttons.length; i++) {
   buttons[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 facing an issue where I can change the color of text but not the background color. My goal is to modify the color when a button is clicked. The :after in CSS works, but changing the color does not. Can someone please provide suggestions on what I may be doing wrong?

javascript html css angularjs

Answer 1

Answer №1

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

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

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

Answer 2

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

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

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

Answer 3

Answer №2

There seems to be a CSS issue at hand here. Instead of setting the style of after, you should set the style of the 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>

Answer 4

There seems to be a CSS issue at hand here. Instead of setting the style of after, you should set the style of the 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>

Answer 5

Answer №3

If you're working with AngularJS, it's recommended to utilize ng-class instead of relying solely on 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>

Answer 6

If you're working with AngularJS, it's recommended to utilize ng-class instead of relying solely on 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>

Answer 7

Answer №4

     .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;
}

Answer 8

     .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;
}

Modifying button appearance upon clicking using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

JavaScript code for transitioning between a thumbnail and a full-width image header on a webpage

Learn the best way to retrieve the highest number from a Array<String> in TypeScript or JavaScript

Error in Firefox: "Anticipated media feature name, but discovered 'hover'"

Manage the border around the image by incorporating a timer countdown - starting from a complete circle, transitioning to a partial arc, and finally disappearing completely

Tips for updating the current user's username value in local storage in Angular

Is there a way to dynamically access BEM-style selectors using CSS modules?

Position the second line of text to align in MUI

Showing an image on Angular JS only for certain input values

Using Vanilla JavaScript and VueJS to smoothly scroll back to the top of a div when a button is clicked

Focus on the input field automatically

Experimenting with Selenium to automate processes involving dynamic class attributes

Change the data returned by Ajax

What is preventing Javascript from executing a function when there is an error in another function?

Alter the border line's color based on the specific section or div it overlays

I am looking to design an AngularJS directive that will generate an interactive HTML template featuring a button

What is the best way to develop a card stack swiper similar to Tinder using React?

Methods for delivering static resources on multiple routes in Express JS

Navigating through Sails.Js: A Guide to Implementing Pagination

Creating a dynamic interaction between HTML forms and JavaScript using the onsubmit event handler

Tips for ensuring all data is downloaded in Firebase (Firestore) Storage before proceeding?