CODEWITHSUNDEEP
javascripthtmlfont-awesome
Emanuel André Freitas
Emanuel André Freitas

Reputation: 11

How do I change a icon upon clicking it in Bootstrap 4?

I have this

<div class="container">
    <button id="menu-sound" class="btn video-icon" onclick="SoundOnAndOff()">
        <i class="fa fa-volume-up"></i>
    </button>
</div>

and in js

$('#menu-sound').click(function(){
$(this).find('i').toggleClass('fa-volume-up').toggleClass('fa-volume-off');
});

Why don't work ?

Upvotes: 0

Views: 6160

Answers (3)

Sajeeb Chandan Saha
Sajeeb Chandan Saha

Reputation: 865

I've solved this problem in another way. You can see my Plunker Demo here. 

 $(document).ready(function() {
  $('#menu-sound').click(function() {
    console.log($('#icon-menu-sound').hasClass('fa-volume-up'));
    if ($('#icon-menu-sound').hasClass('fa-volume-up')) {
      $('#icon-menu-sound').removeClass('fa-volume-up');
      $('#icon-menu-sound').addClass('fa-volume-off');
    } else if ($('#icon-menu-sound').hasClass('fa-volume-off')) {
      $('#icon-menu-sound').removeClass('fa-volume-off');
      $('#icon-menu-sound').addClass('fa-volume-up');
    }
  });
});

I've changed the HTML a bit

<div class="container">
<button id="menu-sound" class="btn video-icon">
<i id='icon-menu-sound' class="fa fa-volume-up"></i>
</button>

Upvotes: 0

Halyna
Halyna

Reputation: 196

Maybe, mistake in library. This work fine.

$('#menu-sound').click(function(){
$(this).find('i').toggleClass('fa-volume-up').toggleClass('fa-volume-off');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
    <button id="menu-sound" class="btn video-icon">
        <i class="fa fa-volume-up"></i>
    </button>
</div>

Upvotes: 2

Michael W. Czechowski
Michael W. Czechowski

Reputation: 3457

The example that you've provided works perfectly fine. There will be another problem. Maybe your libraries are not loading correctly. So find out more about debugging your code and you'll find the problem pretty soon.

$('#menu-sound').click(function() {
  $(this).find('i').toggleClass('fa-volume-up').toggleClass('fa-volume-off');
});

function SoundOnAndOff() {
  console.log('toggling sound');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="container">
  <button id="menu-sound" class="btn video-icon" onclick="SoundOnAndOff()">
        <i class="fa fa-volume-up"></i>
    </button>
</div>

Further reading:

Liam answered already How can I debug my JavaScript code? [closed]

Upvotes: 1

Related Questions