Why my code is not working?

Question

https://sololearn.com/compiler-playground/WpcagVoCUwVO/?ref=app

When i click on play button. I expect that icon get removed. But instead. It's showing error. The error arises because of line 53-57 of javascript. But I have no idea why!

Answer 1

Manav Roy

do this instead:

Array.from(document.getElementsByClassName("songItemList")).forEach((e)=>{
e.addEventListener("click",function(){
// change to this:
e.classList.remove("far", "fa-play-circle");
});
});

edit: oh i see you already fixed it
but it's a bit confusing.
there's no interlock between the items in the song list.
every play/pause can be toggled independently of each other, which makes for a confusing ui.
how do you know which one is actually playing?

i imagine the list to work more like a radio-button group, where only one is played while others are toggled off. they shouldn't be independent of each other.

Answer 2

Manav Roy
I modified your code to use input type="radio" instead.

it's easier to show only one active selection this way without needing js to toggle classes and this also provides a mechanism for determining which song is selected and what song is played.

of course, that part is still on your todo list 😁

https://sololearn.com/compiler-playground/Wf1NYpu84Th7/?ref=app

Answer 3

Event listener Incomplete...

Array.from(document.getElementsByClassName("songItemList")).forEach((e)=>{
e.addEventListener("click",function(){
e.target.classList.remove("far fa-play-circle");
// The logic to play the specific song is missing

Answer 4

Music switching does not happen in the code
There are some variables that are not used yet in your project

Answer 5

Yeah yeah, but it is incomplete and that is the error. Do you want me to send the correct code? I don't think that's right...

Answer 6

What is the difference between using "this"keyword and passing a parameter inside function, Let's say Event and use Event.classList.toggle instead?

when i pass a parameter, Let's say el in that function instead of using this keyword. it shows error!!

Answer 7

Zero I think it's the same code I've written 😅

Answer 8

Zero
Music switching doesn't happen in my code cuz it's only 40% completed and I'm yet to add all the features...

I just want it remove the play icon when i click on it. But it's throwing error and idk why. What do u mean by "Event listener incomplete"?

Answer 9

Ah now what you want makes sense.

The code recognizes that the music player is incorrect so far.

Answer 10

Your code:

Array.from(document.getElementsByClassName("songItemList")).forEach((e)=>{
e.addEventListener("click",function(){
e.target.classList.remove("far fa-play-circle");

The fix:

Array.from(document.getElementsByClassName("songItemList")).forEach((e)=>{
e.addEventListener("click", function() {
// Toggles between play and pause for the clicked icon
this.classList.toggle("fa-play-circle");
this.classList.toggle("fa-pause-circle");

Answer 11

About the Incomplete Event Listener, the music playback doesn't work... As an example, we only have the first player (because it only has one song in its code) and the music doesn't play... understand?

Answer 12

What I did above is just changing the icon, you can do the music player one! ;)

Answer 13

Zero Thank you so much !!

Answer 14

Bob_Li Hmm maybe!!

Answer 15

I'm not a big user of these services. perhaps you can find these info on the site's FAQ page. I'm sure there is a limit. serving lots of data tends to get expensive.

Answer 16

Bob_Li In my code when I play song. It is taking time to play ( initial loading). How to fix this?

Answer 17

I'm not sure. perhaps it's a server limitation. free file hosting sites will not give you the best performance.
or maybe there is a silent portion at the start of your mp3 files.

Answer 18

Bob_Li Btw what is the hosting time limit of these free hosting audio services?

Answer 19

Bob_Li Hey i need help!!
In my code when i click on that play button. It plays song successfully. But when I try to pause it,It throws error even though I set the condition
if(ev.target.classList.value=="fa-pause-circle"){
audioElement.pause();
ev.target.classList.remove("fa-pause-circle");
ev.target.classList.add("fa-play-circle");

Why is that?