I'm learning javascript and AngularJS. I made this little code for something (we made it in AngularJS format), and we need to make this same logic but using only javascript.
The color of a botton changes to other when it's available or unavailable.
Can someone help me with this and tell me the logic?
$scope.saveButton= function(){
$( "#saveButtonPics" ).removeClass( "attachment-space-available" ).addClass( "attachment-boton-guardado" );
};
It is not Angular but jQuery apart from the $scope which I guess is part of some Angular scope
A plain JS version could be
const saveButton = () => {
const cl = document.getElementById("saveButtonPics").classList;
cl.remove("attachment-space-available")
cl.add("attachment-boton-guardado");
};
If you want to chain, have a look at chaining HTML5 classList API without (Jquery)
const classList = elt => {
const list = elt.classList;
return {
toggle: function(c) { list.toggle(c); return this; },
add: function(c) { list.add (c); return this; },
remove: function(c) { list.remove(c); return this; }
};
};
const saveButton = () {
classList(document.getElementById("saveButtonPics"))
.remove("attachment-space-available")
.add("attachment-boton-guardado");
};
In angularjs we need change model to change view
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="saveButton()" ng-class="savebtnclass">Save Pics</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.savebtnclass = "attachment-space-available";
$scope.saveButton=function(){
$scope.savebtnclass = "attachment-boton-guardado";
}
});
</script>
</body>
</html>
