在这里我想把播放按钮改成暂停

Question

这是html

i'm a complete beginner as i started learning js since last two month, please help me to solve this problem

     <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

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

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 toggle改变图标。

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

Answer 2

将变化传递给点击侦听器，不调用变化函数。

btn.addEventListner('click',改变);

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 3

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

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

你的代码有一些错误。

addEventListner() 包含错字。应该是addEventListener()
您存储 change() 函数的结果（它不存在，因为它没有 return 任何东西）而不是将函数附加为事件处理程序。所以不要调用函数。
您的元素变量不包含元素，而是包含事件对象，因此您需要先调用目标或 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 4

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

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

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

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>

在这里我想把播放按钮改成暂停

here i want to change play button into pause

html

javascript

dom-events