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

Question

我是JavaScript世界的新手，我正在尝试学习如何使用香草JS来编写一个按钮，该按钮将在“播放”和“暂停”之间切换其状态。 我遇到的问题是，我可以在控制台中验证我的代码是否成功切换了“ i”标签的类，但是图像似乎没有更新。

此更改是否以某种方式未反映在DOM树中？

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

有工作代码示例：

 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

我通过使用非SVG版本的Font Awesome（4.7.0）解决了此问题。 这样，我的JavaScript就不会与控制它们在版本5中使用的SVG图标的FA的JS战斗。