在这里我想将播放按钮更改为暂停

Question

这是 html

我是一个完整的初学者，因为我从上两个月开始学习 js， 请帮我解决这个问题

     <h1>Best Song Collection</h1>
     <div class="songItem">
       <span class="songName">love you zindagi</span>
       <span class="btn"><i class="far fa-play-circle playbtn"></i></span>
       <span class="btn"><i class="far fa-pause-circle pausebtn"></i></span>
     </div>
     <div class="songItem">
  
       <span class="songName">love you zindagi</span>
       <span class="btn"><i class="far fa-play-circle playbtn"></i></span>
       <span class="btn"><i class="far fa-pause-circle pausebtn"></i></span>
     </div>
   </div>
 </div>

js

let pausebtn = document.querySelector(".pausebtn");

let playbtn = document.querySelector(".playbtn")

let btn = document.querySelectorAll(".btn");

function change(element){
    if(element.classList==="fa-play-circle"){
    element.classList.remove("fa-play-circle");
    element.classList.add("fa-pause-circle");
}
}

btn.addEventListner('click',change());

Answer 1

首先，如果你传递一个回调函数，不要调用它。你需要这样做btn.addEventListner('click', change);。 （另外，addEventListener 有错别字）

其次，我会改变你的 HTML 和 JS 的逻辑。没有必要在每个.songItem div 中保留两个跨度，您可以只保留一个，并在用户单击按钮时更改负责图标的类。您将拥有更少的代码，并且更具可读性。此外，您不需要在跨度内放置i 标签，您可以将图标类直接传递给跨度。更重要的是，使用const而不是let更方便，因为你不打算改变变量的值。

您可以通过下面编写的代码来实现它，我还附上了一个带有工作示例的代码笔。

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

const btns = document.querySelectorAll('.btn')

function onChange (event) {
  // get the button elememt from the event
    const buttonElement = event.currentTarget
  
  // check if play button class is present on our button
  const isPlayButton = buttonElement.classList.contains(playIconClassName)
  
  // if a play button, remove the play button class and add pause button class
  if (isPlayButton) {
    buttonElement.classList.remove(playIconClassName)
    buttonElement.classList.add(pauseIconClassName)
    
    // if a pause button, remove pause button class and add play button class
  } else {
    buttonElement.classList.remove(pauseIconClassName)
    buttonElement.classList.add(playIconClassName)
  }


  // You can also use .toggle function on classList as mentioned by the person in other answer
}

// query selector all returns a list of nodes, therefore we need to iterate over it and attach an event listener to each button seperatly
btns.forEach(btn => {
    btn.addEventListener('click', onChange)
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"/>
 <h1>Best Song Collection</h1>
<div class="songItem">
  <span class="songName">love you zindagi</span>
  <span class="btn far fa-play-circle"></span>
</div>
<div class="songItem">
  <span class="songName">love you zindagi</span>
  <span class="btn far fa-play-circle"></span>
</div>

Answer 2

您可能想要切换按钮，所以我为此做了一个示例。当你按下播放按钮时，它会显示暂停，当你按下暂停按钮时，它会显示播放。

当单击按钮时，fa-play-circle 和 fa-pause-circle 都会切换以在单击时更改按钮图标。

您在代码中犯了一些错误。

1. addEventListner() 包含一个错字。应该是addEventListener()
2. 您存储 change() 函数的结果（它不存在，因为它不返回任何内容）而不是将该函数附加为事件处理程序。所以不要调用这个函数。
3. 您的元素变量不包含元素，而是包含事件对象，因此您需要先调用 target 或 currentTarget 属性。

document.querySelectorAll(".btn").forEach(element => element.addEventListener('click', (event) => {
  let iElement = event.currentTarget.querySelector('i');
  iElement.classList.toggle("fa-play-circle");
  iElement.classList.toggle("fa-pause-circle");
}));

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"/>

<div class="songItem">
  <span class="songName">love you zindagi</span>
  <span class="btn"><i class="far fa-play-circle playbtn"></i></span>
</div>
<div class="songItem">
  <span class="songName">love you zindagi</span>
  <span class="btn"><i class="far fa-play-circle playbtn"></i></span>

</div>

Answer 3

将更改传递给点击监听器，不要调用更改函数。

btn.addEventListner('click', change);

const pausebtn = document.querySelector(".pausebtn");
const playbtn = document.querySelector(".playbtn");
const btn = document.querySelectorAll(".btn");

function change(element) {
  if (element.classList === "fa-play-circle") {
    element.classList.remove("fa-play-circle");
    element.classList.add("fa-pause-circle");
  }
}

btn.addEventListner("click", change);

Answer 4

乍一看，这似乎是一个语法问题。 尽量不要调用函数，作为参数，您应该收到一个事件。 所以它看起来像这样：

let pausebtn = document.querySelector(".pausebtn");

let playbtn = document.querySelector(".playbtn")

let btn = document.querySelectorAll(".btn");

function change(event){
  if(event.target.classList==="fa-play-circle"){
    event.target.classList.remove("fa-play-circle");
    event.target.classList.add("fa-pause-circle");
  }
}

btn.addEventListner('click', change);

编辑：在 HTML 中，您有播放和暂停两个按钮，您应该只有一个并使用 js 切换更改图标。

语义提示，按钮使用按钮标签。