Changing a color of a Bulma button when clicked

Question

I want to change the color of my Bulma button, in my Rails app. Those button are use to filter results on a search page.

So far i did the following, but it is not working the color is not changing:

<%= link_to request.params.merge(category: "9"), class: "button is-rounded", id: "ButtonId" do %>
                                <i class="fas fa-thermometer-full"></i><%= t "services.title" %>
                                <% end %>

<script>
$('#ButtonId').click(function() {
$(this).addClass('has-background-danger');
});
</script>

Well, it is not working, i am not sure why the color don't change — Tomas, May 28 '20 at 19:36
Is the CSS from the added class getting applied or overwritten? — Rockwell Rice, May 28 '20 at 19:56
Ok, not really sure what you mean, is the class `'has-background-danger'` getting added? — Rockwell Rice, May 28 '20 at 20:07
Inspect the button, does it have the id `ButtonId` on it (and make sure it is the only button with this id on the page too) — Rockwell Rice, May 28 '20 at 20:11
yes the button as the specific id and it is also the only one having it.. — Tomas, May 28 '20 at 20:31
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/214856/discussion-between-rockwell-rice-and-tomas). — Rockwell Rice, May 28 '20 at 20:52

score 0 · Answer 1 · answered Jun 01 '20 at 07:31

I was not charging Fontawesome correctly, the following solve my problem:

First,

  yarn add @fortawesome/fontawesome-free

After in app/javascript/packs/application.js

   import "@fortawesome/fontawesome-free/js/all";

And in app/javascript/css/main.scss

 @import '@fortawesome/fontawesome-free';

Finally in app/javascript/packs/application.js, i removed

window.jQuery = $;
window.$ = $;

Changing a color of a Bulma button when clicked

1 Answers1