Question

I tested the following code in IE, Chrome, and Firefox and it does not work in any of them. I have read several questions about similar problems but they have not offered solutions that fix my example.

I am trying to create a pause/play button that interfaces with JWplayer (I also want it to interface with flowplayer, once I get the button working) and the image will change depending on which image is currently there. I also have a stop button that stops the player completely and changes the image of the pause/play button to pause.

Here is my current code:

<script type="text/javascript">
function changeimg()
{
  var obj = document.getElementById('image1');
  var imgtag1 = '<img src=\'PLAY.png\'>';
  var imgtag2 = '<img src=\'PAUSE.png\'>';
  if(obj.innerHTML == imgtag2)
  {obj.innerHTML = imgtag1;}
  else
  {obj.innerHTML = imgtag2;}
  return;
}

function playimg()
{
  document.getElementById('image1').innerHTML = '<img src=\'PLAY.png\'>';
  return;
}

</script>

<div id="image1" href="#" onclick="changeimg(); jwplayer('mediaspace1').play(); jwplayer('mediaspace2').play(); jwplayer('mediaspace3').play(); jwplayer('mediaspace4').play();"><img src='PLAY.png'></div>
<div href="#" onclick="playimg(); jwplayer('mediaspace1').stop(); jwplayer('mediaspace2').stop(); jwplayer('mediaspace3').stop(); jwplayer('mediaspace4').stop();"><img src='STOP.png'></div>

The play/pause function works, and the first div WILL change into the pause img (so the javascript is going through) and it WILL change back into play if I click on the second div (stop function – triggers playimg() ) but it will not change back into the play image if I click on the pause button again.

For security reasons I can’t link the website, but any help would be appreciated

Answer 1

It looks like all you really want to change is the SRC of the IMG tag, not necessarily the entire innerHTML. As machineghost mentions in his comment, there may be whitespace added or other changes to the full HTML that may make your comparison come out as false.

However, you could check if obj.src == “PLAY.png” and set the SRC attribute directly. Something like this:

function changeimg()
{
  var obj = document.getElementById('image1');
  var img1 = 'PLAY.png';
  var img2 = 'PAUSE.png';
  if(obj.src == img2)
  {obj.src = img1;}
  else
  {obj.src = img2;}
  return;
}