Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Kevin Dunn
Kevin Dunn
6,623 Points

Problems appending an embed player properly

Hi, I have a web page with some icons. The main idea here is that when a user clicks on these icons, I want a specific ambient sound to be played according to which icon was clicked. The problem here is that I am not able to properly embed a player into the unordered list.

For example, at the moment when clicking any icon, the traffic ambient sound is being played, even though the corresponding traffic icon was never clicked. I'm not exactly sure what I'm doing wrong. Any help would be greatly appreciated.

<body>
        <nav class="main-nav">
            <h3 class="nav-title">Trancool</h3>
            <ul class="nav-list">
                <li>Home</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </nav>
        <div class="main-content">
            <header class="main-header">
                <h1>Trancool</h1>
            </header>
            <div class="primary-content">
                <ul class="song-list">
                    <li class="play icons"><i class="coffee fa fa-coffee fa-trancool-icons" aria-hidden="true"></i></li>
                    <li class="play icons"><i class="traffic fa fa-car fa-trancool-icons" aria-hidden="true"></i></li>
                    <li class="play icons"><i class="rain fa fa-tint fa-trancool-icons" aria-hidden="true"></i></li>
                    <li class="play icons"><i class=" fire fa fa-fire fa-trancool-icons" aria-hidden="true"></i></li>
                </ul>
            </div>
        <div>
        <footer class="main-footer">
        <footer>
        <script src="https://code.jquery.com/jquery-3.1.0.js"   integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="   crossorigin="anonymous"></script>
        <script src="js/trancool.js" type="text/javascript"></script>
    </body>

$(function(){
    $('.song-list').on('click', 'i', function(event){
        if($(event.target.className === 'coffee')){
            if($('embed').length === 0){
                $(this).append('<embed id="embed_player" src="audio/cafe.wav" autostart="true" hidden="true"></embed>')
            }
            else{
                $('embed').remove();
            }
        }

        if($(event.target.className === 'rain')){
            if($('embed').length === 0){
                $(this).append('<embed id="embed_player" src="audio/rain.mp3" autostart="true" hidden="true"></embed>')
            }
            else{
                $('embed').remove();
            }
        }

        if($(event.target.className === 'traffic')){
            if($('embed').length === 0){
                $(this).append('<embed id="embed_player" src="audio/traffic.mp3" autostart="true" hidden="true"></embed>')
            }
            else{
                $('embed').remove();
            }
        }

    });
});