CODEWITHSUNDEEP
javascriptjqueryhtml
Ten Man
Ten Man

Reputation: 21

please fix code append() and empty()

this is my code

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#stopmusic").click(function(){
                $("#musicbox").empty();
            });
            $("#playmusic").click(function(){
                if ($('#musicbox').visible( true )) {
                    $('#musicbox').append('');
                }  
                else {
                    $('#musicbox').append('<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />')
                }        
            });
        });
    </script>
</head>
<body>
    <center>
        <button id="playmusic">Play</button>
        <button id="stopmusic">Stop</button><br>
        <div id="musicbox">
            <iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />
        </div>
    </center>
</body>
</html>

The empty() is ok but the append() is not working. I want to remove the playlist from my website when the button "Stop" is clicked and show the playlist again when the button "Play" is clicked.

My previous code is not include the if/else so when I click "Play", the playlist appear another, another , another again but i want it appear 1 time and if i click "Stop", it's gone, if i click "Play", it's appear again.

Can anybody help? Please.

Upvotes: 1

Views: 134

Answers (7)

Amit
Amit

Reputation: 847

Try with below updated script code

$(document).ready(function(){
        $("#stopmusic").click(function(){
            $("#musicbox").empty();
        });
        $("#playmusic").click(function(){
            if ($('#musicbox iframe').is(':visible')) {
                $('#musicbox').append('');
            }  
            else {
                $('#musicbox').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/flMDiQib1J4?list=PL7W4kY6q3mxsiAgJNh1BlEWGI3PXBUqju" frameborder="0" allowfullscreen></iframe>');
            }        
        });
    });

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

Instead of manipulating the inner HTML,
you could simply show / hide

    $(document).ready(function(){

        $("#stopmusic, #playmusic").click(function() {
            $("#musicbox").toggle();
        });

    });

I'm not sure if your iframe contains playable video content (since you've used a pseudo src).
In the case you want to stop your iframe from playing:

    $(function(){ // DOM ready shorthand

        var $mBox = $("#musicbox");
        var iframe = $("iframe")[0].outerHTML;

        $("#stopmusic, #playmusic").click(function() {
            $mBox.html( this.id==="stopmusic" ? "" : iframe );
        });

    });

Note that <center> tag is deprecated in HTML5.

jsBin demo

Upvotes: 3

Shivananda Chary
Shivananda Chary

Reputation: 565

Try this,

    .......
$("#playmusic").click(function(){
                if ($('#musicbox > iframe').length>0) {
                    $('#musicbox').append('');
                }  
                else {
                    $('#musicbox').append('<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />')
                }        
            });
.........

Upvotes: 0

Alexis Paques
Alexis Paques

Reputation: 1975

Here is the working example 

$(document).ready(function() {
  $("#stopmusic").click(function() {
    $("#musicbox").empty();
  });
  $("#playmusic").click(function() {
    $('#musicbox').html('<p>Test</p>');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
  <button id="playmusic">Play</button>
  <button id="stopmusic">Stop</button>
  <br>
  <div id="musicbox">
    <p>Test</p>
  </div>
</center>

Upvotes: 0

Pratik
Pratik

Reputation: 1138

$("#stopmusic").click(function(){
    $("#musicbox").empty();
});

$("#playmusic").click(function(){
    if ($('#musicbox').html() == '') {
      $('#musicbox').append('<iframe src="youtube_playlist" width="300px" height="60px"        scrolling="no" />')
   }        
});

Upvotes: 0

The F
The F

Reputation: 3714

Try something like this:

$("#stopmusic").click(function(){
     $("#musicbox").empty();
});
$("#playmusic").click(function(){
     if ($('#musicbox iframe').length < 1) {
         $('#musicbox').html('<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />')
    }        
});

Upvotes: 0

shershen
shershen

Reputation: 9993

Isn't it $(SELECTOR).is(':visible') more appropriate ? There is no such a function $(SELECTOR).visible(true) in jQuery.

if ($('#musicbox').is(':visible') {
//do stuff
}

Upvotes: 0

Related Questions