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" );
};
Answer
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");
};