Question 271364 in Html Question posted in
Some basic documentation can be found here.

Html – font awesome play icon is not changing to pause icon when in javascript

the font awesome icon is not changing from play to pause when i click on it i have tried a bunch of methods but this one seems to be more accurate but icon still doesnt change.please tell whats wrong with this one or provide some other method

    const makeallplay= ()=>{
    let smallplayicons= songplayicon.querySelectorAll("svg");
    Array.from(smallplayicons).forEach((element)=>{
        element.classList.remove('fa-circle-pause');
        element.classList.add('fa-circle-play');
        })
       }

    Array.from(songplayicon.querySelectorAll('svg')).forEach((element)=>{
          element.addEventListener('click', (e)=> 
          makeallplay();
          e.target.classList.remove('fa-circle-play');
          e.target.classList.add('fa-circle-pause');
         })
        })

here is the relevant HTML code

         <div class="song-item">
                <img  src="logos/song1.jpg" alt="1">
                <span>ILLAHI</span>
                <span class="song-info">3:24 <span class="songplayicon"> <i class="fa-solid fa-circle-play play "></i></span> </span>
            </div>
            <div class="song-item">
                <img  src="logos/cover2.jpeg" alt="1">
                <span>The Nights</span>
                <span class="song-info">3:26 <span class="songplayicon"> <i class="fa-solid fa-circle-play play "></i></span> </span>
            </div>
Tags:

2

Answers


  1. 0

    Many issues.

    • Missing {
    • Where do you define songplayicon
    • There are no SVG tags in your example

    There is not much correct in your script so I did not try to "fix" it but rewrote it from scratch

    Here is a delegation version. I wrapped your items in a div

    I changed to code to toggle the other icons when necessary.

    const container = document.getElementById('song-items')
const icons = container.querySelectorAll('.songplayicon i');
container.addEventListener('click', (e) => {
  const tgt = e.target.closest('span.songplayicon');
  if (!tgt) return;
  const thisIcon = tgt.querySelector('i');
  const targetPlay = thisIcon.matches('.fa-circle-play'); // we want to play
  icons.forEach(icon => {
    if (targetPlay) {
      icon.classList.toggle('fa-circle-play', targetPlay);
      icon.classList.toggle('fa-circle-pause', !targetPlay);
    }
  });
  thisIcon.classList.toggle('fa-circle-pause', targetPlay);
  thisIcon.classList.toggle('fa-circle-play', !targetPlay);
  // here you can use code to play or pause
  // const audio = tgt.closest('div.song-item').querySelector('audio');
  // audio[targetPlay ? 'play' : 'pause'];
})
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />

<div id="song-items">
  <div class="song-item">
    <img src="logos/song1.jpg" alt="1">
    <span>ILLAHI</span>
    <span class="song-info">3:24 <span class="songplayicon"> <i class="fa-solid fa-circle-play play "></i></span> </span>
  </div>
  <div class="song-item">
    <img src="logos/cover2.jpeg" alt="1">
    <span>The Nights</span>
    <span class="song-info">3:26 <span class="songplayicon"> <i class="fa-solid fa-circle-play play "></i></span> </span>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    The code you’ve provided is almost correct, but there is a small issue with your event listener function’s structure. You need to use curly braces to group statements inside the event listener. Here’s the corrected code:

    const makeAllPlay = () => {
    const smallPlayIcons = document.querySelectorAll(".songplayicon svg");
    smallPlayIcons.forEach((element) => {
        element.classList.remove('fa-circle-pause');
        element.classList.add('fa-circle-play');
    });
};

document.querySelectorAll('.songplayicon svg').forEach((element) => {
    element.addEventListener('click', (e) => {
        makeAllPlay();
        e.target.classList.remove('fa-circle-play');
        e.target.classList.add('fa-circle-pause');
    });
});

    Here are the changes made:

    1. The event listener function now correctly groups statements within curly braces.
    2. I also fixed the selector to match the "svg" elements within the
      .songplayicon elements.

    With these changes, when you click on a play icon, it should toggle between the play and pause icons as expected.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search