Buttons failing to adjust the color of the background and text

Question

Buttons failing to adjust the color of the background and text

There seems to be an issue with this piece of code. I can't quite put my finger on it, but something is definitely off.

I am trying to make it so that when a button is clicked, the background color and text font changes. Unfortunately, this is not working as expected.

<style>
.red { background-color: red; }
.red p { font-style: normal; }

.blue { background-color: blue; }
.blue p { font-style: italic; }

.green { background-color: green; }
.green p { font-style: oblique;}
</style>
<div ng-class={{colorScheme}}>

    <button ng-click="colorScheme = 'red'">ColorScheme Red</button>
    <button ng-click="colorScheme = 'blue'">ColorScheme Blue</button>
    <button ng-click="colorScheme = 'green'">ColorScheme Green</button>

    <p>Awesome content</p>

</div>

javascript jquery html css angularjs

Answer 1

Answer №1

To apply different styles based on a scope variable, you can use the ng-class directive as shown below:

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {})

.red {
  background-color: red;
}
.red p {
  font-style: normal;
}
.blue {
  background-color: blue;
}
.blue p {
  font-style: italic;
}
.green {
  background-color: green;
}
.green p {
  font-style: oblique;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
  <div ng-class="colorScheme">
    <button ng-click="colorScheme = 'red'">ColorScheme Red</button>
    <button ng-click="colorScheme = 'blue'">ColorScheme Blue</button>
    <button ng-click="colorScheme = 'green'">ColorScheme Green</button>
    <p>Awesome content</p>
  </div>
</div>

Answer 2

To apply different styles based on a scope variable, you can use the ng-class directive as shown below:

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {})

.red {
  background-color: red;
}
.red p {
  font-style: normal;
}
.blue {
  background-color: blue;
}
.blue p {
  font-style: italic;
}
.green {
  background-color: green;
}
.green p {
  font-style: oblique;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
  <div ng-class="colorScheme">
    <button ng-click="colorScheme = 'red'">ColorScheme Red</button>
    <button ng-click="colorScheme = 'blue'">ColorScheme Blue</button>
    <button ng-click="colorScheme = 'green'">ColorScheme Green</button>
    <p>Awesome content</p>
  </div>
</div>

Answer 3

Answer №2

When utilizing ng-class, it is recommended to avoid using expressions{{}} and instead directly use the scope object. This is because ng-class is a default directive in Angular that is not designed to handle expressions {{}}

Alternatively, you can utilize classes with expressions as demonstrated below:

<div class="{{colorScheme}}">

    <button ng-click="colorScheme = 'red'">ColorScheme Red</button>
    <button ng-click="colorScheme = 'blue'">ColorScheme Blue</button>
    <button ng-click="colorScheme = 'green'">ColorScheme Green</button>

    <p>Awesome content</p>

</div>

Answer 4

When utilizing ng-class, it is recommended to avoid using expressions{{}} and instead directly use the scope object. This is because ng-class is a default directive in Angular that is not designed to handle expressions {{}}

Alternatively, you can utilize classes with expressions as demonstrated below:

<div class="{{colorScheme}}">

    <button ng-click="colorScheme = 'red'">ColorScheme Red</button>
    <button ng-click="colorScheme = 'blue'">ColorScheme Blue</button>
    <button ng-click="colorScheme = 'green'">ColorScheme Green</button>

    <p>Awesome content</p>

</div>

Answer 5

Answer №3

If you're using JQuery, this solution should do the trick:

$("button").click(function(){
    $(this).parent().removeClass().addClass($(this).attr('color'));
});

Check out the JSFiddle demo :)

Answer 6

If you're using JQuery, this solution should do the trick:

$("button").click(function(){
    $(this).parent().removeClass().addClass($(this).attr('color'));
});

Check out the JSFiddle demo :)

Buttons failing to adjust the color of the background and text

Answer №1

Answer №2

Answer №3

Similar questions

Connecting a JavaScript script from my HTML file to Django's static files - here's how

"Running experiments with Google Ads and Google Analytics scripts results in a blank page being displayed

Optimizing image dimensions on Instagram using JQuery

Tips for aligning a div containing an image in the center of another div

Utilizing X-editable in an ASP MVC View: navigating the form POST action to the controller

extract the key identifier from the JSON reply

Having difficulty duplicating a button with a click event using jQuery

How to fix the Uncaught TypeError: Unable to access the 'open' property of an undefined value in the AppBar + Drawer component with ReactJS and Material-UI?

Hide using jQuery only if the element is currently visible, and show using jQuery only if

Displaying information in ejs format

ReactJS: Difficulty with SVG foreignObject not capturing onClick event

The image appears to be overlapping within the navigation bar

There was an error with the response code of 500 on the development server for react-native

Can content be dynamically loaded through ajax in Simile Timeline instead of being loaded upfront?

When incorporating SQL statements into JavaScript code, it fails to function properly if the NVARCHAR attribute contains a line break

The controller method appears to be unable to detect any parameters

What is the most efficient way to organize an array by date?

Present boundaries shown on Google Maps using the ng-map library

Every time a button is clicked on the interface, a new element or button will appear. This functionality is made possible through

Display new information within a div element seamlessly without refreshing the page