Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

220
Visualizações
here i want to change play button into pause

this is 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());
about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

You probably want to toggle the button so I made an example for that. When you press the play button it will show the pause and when you press the pause button it shows play.

When the button is clicked both fa-play-circle and fa-pause-circle are toggled to alter the button icon when clicked.

You made a few mistakes in your code.

  1. The addEventListner() contains a typo. It should be addEventListener()
  2. You store the result of the change() function (which does not exist since it does not return anything) instead of attaching the function as an event handler. So dont call the function.
  3. Your element variable does not contain an element but the event object so you need to call the target or currentTarget property first.

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>

about 4 years ago · Juan Pablo Isaza Relatório

0

First of all, if you pass a callback function, do not call it. There you need to do it as so btn.addEventListner('click', change);. (Also, there is a typo in addEventListener)

Second of all, I would change the logic of both your HTML and JS. There is no need to keep two spans inside each .songItem div, you can keep only one and just change the class that is responsible for the icon when a user clicks on the button. You will have less code and it will be more readable. Also, you don't need to put a i tag inside a span, you can pass the icons class directly to the span. What is more, it is more convenient to use const instead of let, because you do not intend to change the value of the variables.

You can achieve it by the code written below, I also attach a codepen with a working example.

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>

about 4 years ago · Juan Pablo Isaza Relatório

0

At first glance, it looks like a syntax issue. Try to not invoke a function and as args, you should receive an event. So it will look something like this:

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);

EDIT: In HTML you have both buttons for play and pause, you should have just one and change the icon with js toggle.

Semantic tip, use button tag for buttons.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda