I completed all the tasks as per the video and instructions, but encountered a problem with the button functionality. When clicking on the pause symbol, it does not change to the play symbol. However, the block is working fine.
What steps should I take to resolve this issue?
Javascript/CSS/HTML
<script>
$(document).ready(function(){
$('#carousel').carousel( { interval: 2000 } );
$("#carouselButton").click(function(){
if ($("#carouselButton").children("span").hasClass('fa-pause')) {
$("#carousel").carousel('pause');
$("#carouselButton").children("span").removeClass('fa-pause');
$("#carouselButton").children("span").addClass('fa-play');
}
else if ($("#carouselButton").children("span").hasClass('fa-play')){
$("#carousel").carousel('cycle');
$("#carouselButton").children("span").removeClass('fa-play');
$("#carouselButton").children("span").addClass('fa-pause');
}
});
});
</script>/* CSS code goes here */HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title Goes Here</title>
<!-- Meta tags, links to stylesheets, etc. -->
</head>
<body>
<!-- HTML content goes here -->
</body>
</html>