带有 Font Awesome 图标的 JavaScript 切换按钮

Question

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

此更改是否未以某种方式反射(reflect)在 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>