单击更改图标

Question

I'm trying to change the icon when the audio is playing.

So, when the user hovers over the image, a play button will appear. The user will then click the play button and the audio will then begin. I'd like to icon to change to the pause button when the audio is playing, then when the user wants to stop the audio, they will click the pause button and it will return to the play button. I thought my code would work by removing and adding classes, but it doesn't.

 var audio = document.getElementById("audio"); function play() { icon = $(this).find("i"); if (audio.paused) { audio.play(); icon.addClass("fa-pause-circle").removeClass("fa-play-circle"); } else { audio.pause(); icon.addClass("fa-play-circle").removeClass("fa-pause-circle"); } } 

 #credits-content { display: grid; grid-template-rows: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr); grid-gap: 15px; height: 750px; width: 80%; margin: 0 10% 50px 10%; } #images-services { grid-row: span 1; grid-column: span 1; } .image-item { display: flex; justify-content: center; align-items: center; color: #f1f1f1; } #coward-image:hover { box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, 0.7); cursor: pointer; } #coward-image { background-image: url("https://i.ytimg.com/vi/xQ0_zWouE8c/maxresdefault.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, 0.0); -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; transition: all .2s ease-in; } #coward-play { opacity: 0; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; transition: all .2s ease-in; } #coward-image:hover #coward-play{ opacity: 1; } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="credits"> <div id="credits-content"> <div id="coward-image" class="image-item images-services"> <audio src="songs/memo.m4a" id="audio"></audio> <i class="far fa-play-circle fa-7x" id="coward-play" onclick="play()"></i> </div> </div> </div> 

Answer 1

The this in your function doesn't refer to the element, as you only have access to this for an HTML onclick event inside the actual attribute. Also, as you have the onclick attached to the icon itself, there is no need to use find() , as that method returns an element's descendant nodes. If you move the onclick to the div and pass in this as a parameter to the function, you can use your code basically as written. I made a Codepen here

Answer 2

You're using $(this) within the play function to try and reference the i icon , which is incorrect scope. If you wanted, you could do onclick="play(this)" and pass the object reference (the i icon element) into your play function and use it correctly there, using $(thisElement) as the object reference within the play function. Also, if you're using jQuery , you can reference the i icon by its id attribute of $('#coward-play') instead of using .find() ; find() looks for nested elements...

I created an example below that shows the alternate way of using .on('click') functionality of jQuery to bind to your coward-play icon , but commented that code out. I've made the example use the onclick="play(this)" route to stay close to your original code.

I also added onended="reset()" to your audio element, so that when the audio finishes playing, it will reset the icon back to the play button as expected.

Warning, Horse Noises when playing audio..

 var audio = document.getElementById("audio"); // THIS IS AN ALTERNATE WAY OF DOING THE CLICK VIA JQUERY /* $('#coward-play').on('click', function() { play(this); }); */ function play(thisElement) { if (audio.paused) { audio.play(); $(thisElement).addClass("fa-pause-circle").removeClass("fa-play-circle"); } else { audio.pause(); $(thisElement).addClass("fa-play-circle").removeClass("fa-pause-circle"); } } function reset() { $('#coward-play').addClass("fa-play-circle").removeClass("fa-pause-circle"); } 

 #credits-content { display: grid; grid-template-rows: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr); grid-gap: 15px; height: 750px; width: 80%; margin: 0 10% 50px 10%; } #images-services { grid-row: span 1; grid-column: span 1; } .image-item { display: flex; justify-content: center; align-items: center; color: #f1f1f1; } #coward-image:hover { box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7); cursor: pointer; } #coward-image { background-image: url("https://i.ytimg.com/vi/xQ0_zWouE8c/maxresdefault.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.0); -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; transition: all .2s ease-in; } #coward-play { opacity: 0; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; transition: all .2s ease-in; } #coward-image:hover #coward-play { opacity: 1; } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="credits"> <div id="credits-content"> <div id="coward-image" class="image-item images-services"> <audio src="https://www.w3schools.com/html/horse.ogg" id="audio" onended="reset()"></audio> <i class="far fa-play-circle fa-7x" id="coward-play" onclick="play(this)"></i> </div> </div> </div> 

Answer 3

You can accomplish this with some JS and JQuery.

 var click = 1; function myFunction() { if (click < 18) { $('#coward-play').click(function() { $('#coward-play').addClass('fa-pause-circle'); $('#coward-play').removeClass('fa-play-circle'); click = 20; console.log(click); }); } if (click > 18) { $('#coward-play').click(function() { $('#coward-play').addClass('fa-play-circle'); $('#coward-play').removeClass('fa-pause-circle'); click = 1; console.log(click); }); } } 

 #credits-content { display: grid; grid-template-rows: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr); grid-gap: 15px; height: 750px; width: 80%; margin: 0 10% 50px 10%; } #images-services { grid-row: span 1; grid-column: span 1; } .image-item { display: flex; justify-content: center; align-items: center; color: #f1f1f1; } #coward-image:hover { box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7); cursor: pointer; } #coward-image { background-image: url("https://i.ytimg.com/vi/xQ0_zWouE8c/maxresdefault.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.0); -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; transition: all .2s ease-in; } #coward-play { opacity: 0; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; transition: all .2s ease-in; } #coward-image:hover #coward-play { opacity: 1; } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="credits"> <div id="credits-content"> <div id="coward-image" class="image-item images-services"> <audio src="songs/memo.m4a" id="audio"></audio> <i class="far fa-play-circle fa-7x" id="coward-play" onclick="myFunction()"></i> </div> </div> </div>