我一直在为Spotify Clone应用程序开发一些交互式播放器图标。让图标/按钮播放歌曲文件没有问题，但我似乎不知道如何使用OnClick事件替换图标类（例如从“fa-solid-play”到“fa-solid-pause”）。
一开始我尝试用innerHTML.text方法修改类，但我发现它只是在已有的图标中嵌套了一个新图标。下面的代码在我调用函数时返回classList = null，对于任何类型的removeClass/ addClass替代方法也是如此。我觉得我可能需要重构一些HTML才能让它有意义。
以下是HTML的一个片段，以供参考：

<div class="Player-Icons">
   <div class="Icon-Div">
     <div class="Shuffle-Icon" onclick="shuffle()"><i class="fa-solid fa-shuffle"></i></div>
     <div class="Previous-Icon" onclick="previous()"><i class="fa-solid fa-backward"></i></div>
     <div class="Play-Icon" onclick="playsong()" ><i class="fa-solid fa-circle-play"  aria-hidden='true' id="Triangle-Play"></i></div>
     <div class="Next-Icon" onclick="next()"><i class="fa-sharp fa-solid fa-forward-step"></i></div>
     <div class="Repeat-Icon" onclick="shuffle()"><i class="fa-solid fa-repeat"></i></div>
   </div>

JS代码段：

{ let play = document.querySelector('.Play-Icon ');
let next = document.querySelector('.Next-Icon');
let current_title = document.querySelector('.Song-Title');
let current_artist = document.querySelector('.Song-Artist');
let current_image = document.querySelector('.Current-Image');
let slider = document.querySelector('.Slider');
let time = document.querySelector('.Song-Start');
let remaining_time = document.querySelector('.Song-Finish');
let volume = document.querySelector('.Volume-Slider');

let timer;
let autoplay = 0;

let index_no = 0;
let playing_song = false;

//const playIconClassName = 'fa-circle-play'
//const pauseIconClassName = 'fa-circle-pause'

//Audio Element
let track = document.createElement('audio');

//Song List 
let All_song = [
{
  name: "No Ceilings",
  path: "Playlist /Track/No Ceilings.mp3",
  img: "Image/image1.jpg",
  artist: "Tony Shhnow",
}
]

//All Functions

//Load the track
function load_track(index_no){
track.src = All_song[index_no].path;
current_title.innerHTML =  'No Ceilings'; //All_song[index_no].name
current_artist.innerHTML = 'Tony Shhnow';
current_image = All_song[index_no].img;
track.load();
console.log('Current artist is ' + current_artist.innerHTML);
console.log('Current title is ' + current_title.innerHTML );
}

load_track(index_no);

//Checker for current song / If else 
function justplay(){
 if(playing_song==false) {
    playsong();
} /*else{
    pausesong();
}*/

}

//Function for playing sample song
function playsong(){
 track.play();
 playing_song = true

if(playing_song==true)  {
    document.querySelector('Play-Icon').classList.remove('fa-circle-play');
    document.querySelector('Play-Icon').classList.add('fa-circle-pause');
    console.log('btnpressed');
}

}
一开始我尝试用innerHTML.text方法修改类，但我发现它只是在已有的图标中嵌套了一个新图标。下面的代码在我调用函数时返回classList = null，对于任何类型的removeClass/ addClass替代方法也是如此。我觉得我可能需要重构一些HTML才能让它有意义。