带字体真棒图标的JavaScript切换按钮

Question

I am new to the JavaScript world, and I'm attempting to learn how to use vanilla JS to program a button that will toggle its state between "play" and "pause." The issue I'm having is that I can verify in the console that my code is successfully toggling the class of the "i" tag, but the image doesn't seem to be updating.

Is this change not being reflected in the DOM tree somehow?

HTML

<a href="#" id="playBtn" class="btn btn-primary">
   <i class="fas fa-play" id="transportIcon"></i>
</a>

JS

var getBtn = document.getElementById('playBtn');
var getIcon = document.getElementById('transportIcon');

getBtn.addEventListener('click', function () {
    if (getIcon.className === 'fas fa-play') {
        getIcon.setAttribute('class', 'fas fa-pause');
    } else {
        getIcon.setAttribute('class', 'fas fa-play');
    }
});

Answer 1

there is working code example:

 var getBtn = document.getElementById('playBtn'); var getIcon = document.getElementById('transportIcon'); getBtn.addEventListener('click', function () { if (getIcon.classList.contains('fa-play')) { getIcon.classList.remove('fa-play'); getIcon.classList.add('fa-pause'); } else { getIcon.classList.remove('fa-pause'); getIcon.classList.add('fa-play'); } }); 

 <a href="#" id="playBtn" class="btn btn-primary"> <i class="fas fa-play" id="transportIcon"></i> </a> 

Answer 2

I fixed this issue by using the non-SVG version of Font Awesome (4.7.0). That way, my JavaScript isn't fighting with FA's JS that controls the SVG icons they use in version 5.