Change a few code format (angularJS to javascript)

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

Leave a Reply

Your email address will not be published. Required fields are marked *