Probablemente quieras alternar el botón, así que hice un ejemplo para eso. Cuando presione el botón de reproducción, mostrará la pausa y cuando presione el botón de pausa, mostrará la reproducción.

Cuando se hace clic en el botón, tanto fa-play-circle como fa-pause-circle se alternan para modificar el icono del botón cuando se hace clic.

Cometiste algunos errores en tu código.

1. El addEventListner() contiene un error tipográfico. Debería ser addEventListener()
2. Almacena el resultado de la función change() (que no existe ya que no devuelve nada) en lugar de adjuntar la función como un controlador de eventos. Así que no llames a la función.
3. Su variable de elemento no contiene un elemento sino el objeto de evento, por lo que primero debe llamar a la propiedad target o 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>

En primer lugar, si pasa una función de devolución de llamada, no la llame. Allí debe hacerlo así btn.addEventListner('click', change); . (Además, hay un error tipográfico en addEventListener)

En segundo lugar, cambiaría la lógica de su HTML y JS. No es necesario mantener dos tramos dentro de cada .songItem div , puede mantener solo uno y simplemente cambiar la clase responsable del ícono cuando un usuario hace clic en el botón. Tendrá menos código y será más legible. Además, no necesita colocar una etiqueta i dentro de un lapso, puede pasar la clase de íconos directamente al lapso. Además, es más conveniente usar const en lugar de let , porque no se pretende cambiar el valor de las variables.

Puede lograrlo con el código escrito a continuación, también adjunto un codepen con un ejemplo de trabajo.

 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>

A primera vista, parece un problema de sintaxis. Intente no invocar una función y, como argumentos, debería recibir un evento. Así que se verá algo como esto:

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

EDITAR: en HTML tiene ambos botones para reproducir y pausar, debe tener solo uno y cambiar el ícono con js toggle.

Sugerencia semántica, use la etiqueta de botón para los botones.