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

Using AJAX to load multiple pages asynchronously

How to extract information from a JavaScript object array in Node.js?

Master the art of adjusting chart width on angular-chart with the help of chart.js

Manipulating Objects and Arrays

When using a function linked to an API request, an uncaught TypeError is thrown: Unable to access the 'includes' property of an undefined value

Ways to eliminate the leading bullet point from an unordered list

CSS magic: Text animation letter by letter

Encountering a malfunction in executing the AngularJS controller file

Add a square div in every direction around the existing content in an HTML file

Creating a personalized pivot-table using the WebDataRock Javascript library with a unique configuration based on a

Best practices for securing passwords using Chrome DevTools in React development

Waiting for Selenium in Javascript

What is the process for incorporating an additional input in HTML as you write?

What is the process of implementing a page change using a GET request in JavaScript using Node.js and Express?

Using Selenium with JavaScript and Python to simulate key presses

Should I use an array literal or split a string?

Loading views and controllers on-the-fly in AngularJS

Using the object value to map an array and populate the resulting elements

Enhance your web design with the latest Bootstrap 5.2

Having trouble with the express message! I can't seem to access the template I created