cannot toggle innerhtml

[turpentyne]

I'm clawing my eyes out because this seems perfectly fine code, and yet it will not work. I just want a toggle to turn off some embedded music.


here's the html:

<a href="#" id="music_control" class="">MUSIC OFF</a>
<span id="music">
	<embed src="http://url.com/dev/music/12_full_prom-night_0132.mp3"autostart="true" loop="true"
width="2" height="0" id="player"> <noembed> <bgsound src="http://url.com/dev/music/12_full_prom-night_0132.mp3"> </noembed>
	</embed> 
</span>

and here's the jquery:

$(document).ready(function() {

var playing = true;


$("#music_control").click(function(){
 	
  		if (playing == false) {
  		playing = true;
          $('music').html("<embed src='http://url.com/dev/music/12_full_prom-night_0132.mp3'autostart='true' loop='true'
width='2' height='0' id='player'> <noembed> <bgsound src='http://url.com/dev/music/12_full_prom-night_0132.mp3'> </noembed>");
          $("#music_control").html("MUSIC ON"); 
           alert(playing);
           

      } else if (playing == true) {
      playing = false;
         $('music').html("<embed src='http://url.com/dev/music/12_full_prom-night_0132.mp3'autostart='false' loop='true'
width='2' height='0' id='player'> <noembed> <bgsound src='http://url.com/dev/music/12_full_prom-night_0132.mp3'> </noembed>");
        $("#music_control").html("MUSIC OFF"); 
        alert(playing);
      } 


  }); 

});

[AndrewGSW]

Music is an id so it should be $('#music'); your browsers' Console probably displayed an error message(?).

If the users' browser doesn't support the embed element then the music will probably still be playing (as bgsound). Why not just remove the element to stop the music.

[VIPStephan]

<bgsound>? Are you serious?

[turpentyne]

actually, that's one of the things I'm trying. I was hoping to use "html()" to clear out the contents so there's nothing in the div. But it's not working. at all.

I fixed the #music, and it still has the same issues. Any thoughts?

[turpentyne]

aha...

not even sure what I did.. but it's fixed with:

$(document).ready(function() {

var playing = true;


$("#music_control").click(function(){
 
  		
  		if (playing == false) {
  		playing = true;
        
          $('#music').html(" <embed src='http://url.com/music/12_full_prom-night_0132.mp3' autostart='true' loop='true' width='2' height='0' id='player'> ");


		
          
          $("#music_control").text("MUSIC OFF"); 
           
           

      } else if (playing == true) {
      playing = false;
        
         $('#music').html("<!-- x -->");

        
        $("#music_control").text("MUSIC ON"); 
         
      } 


  });