Adding images to pause and play instead of color

JavaScript
1

I don’t understand what I’m doing wrong.

I’m trying to include an image on pause and play. This is of it working without images. I can’t seem to get it to work adding images to pause and play. This is how it works without images, after I include images it doesn’t work. https://jsfiddle.net/y6Lh5svh/6/

I’m adding them like this, but it’s not working.

Play:
playButton2.style.backgroundImage = 'url('https://i.imgur.com/A445IfJ.png’)';

Pause:
playButton2.style.backgroundImage = 'url('https://i.imgur.com/qg4rg7Z.png’)';

Red box: you click

Then you get this image:
https://i.imgur.com/A445IfJ.png

you click and it plays

pause: you click again and you get this image
https://i.imgur.com/qg4rg7Z.png

It’s supposed to go from the red to the image, you click that, it plays, you click again and it goes to the other image.

1 image is play, another image is pause.

https://jsfiddle.net/y6Lh5svh/10/

<div style="width:0;" onclick="myObject=document.getElementById('myObj2');
myObject.style.display='block'; this.style.display='none'">

<div style="width: 50px; height:50px;  cursor: pointer; background-color:#cc333f;">

</div></div>

<div id="myObj2" style="display: none;">

<button id="playButton2" style="display:block; width:50px; height:50px; border:none; cursor: pointer; background-color:#000000;" onclick="  
var player = document.getElementById('player2').volume='1.0';
var button = document.getElementById('playButton2');
  var player = document.getElementById('player2');
  if (player.paused) {
    playButton2.style.backgroundColor = '#000000';
    playButton2.style.backgroundImage = 'url('https://i.imgur.com/A445IfJ.png')';
    player.play();
  } else {
playButton2.style.backgroundImage = 'url('https://i.imgur.com/qg4rg7Z.png')';
    player.pause();
  }">
 </button>
</div>

<audio id="player2" preload="none" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>
2

As a wild guess, it feels like you’d be better off using the JS to change the class on the element, and then reference each of the classes in your CSS, which will have the reference to the appropriate background image in it.

3

That’s a good idea. The only trouble is that his code is getting far too complex to understand easily, so people will be less likely to want to take the time to try and understand what’s going on there.

3 Likes
4

How come I’m able to change colors doing it this way, but images it’s giving me an issue?

5

I’ve only had a short look at your code, but one obvious error is that you’re not properly opening and closing quotes in statements like this

playButton2.style.backgroundImage = 'url('https://i.imgur.com/qg4rg7Z.png')';

This happens because of inline JS as you can’t use e.g. double quotes for the surrounding quotes. Of course, as @chrisofarabia said, even better would be to apply classes. Here’s a basic example:

CSS

#playButton {
  width: 50px; 
  height:50px; 
  border:none; 
  cursor: pointer; 
  background-color:black;
  background-image: url('https://i.imgur.com/A445IfJ.png');
}

#playButton.active {
  background-image: url('https://i.imgur.com/qg4rg7Z.png');
}

HTML

<button id="playButton"></button>
<audio id="player" preload="none" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>

JS

var player = document.getElementById('player');

document.getElementById('playButton').addEventListener('click', function() {
	
  if (this.className === 'active') {
    this.className = '';
    player.pause();
  } else {
    this.className = 'active';
    player.play();
  }
});

Here’s a fiddle.

2 Likes
6

Perhaps you’re beginning to understand why messy code is not such a good idea…

3 Likes
7

Because you’re using inline styles and JavaScript and this is immediately getting far too confusing to debug. I think the quotes I mentioned above are the main issue here, an error directly caused by inline JS.

x-post :-)

7 Likes
8

Can you show us the code that works before the images were added?

9

Yes: Here it is.

It goes from red, to black, to border, then back to red.

10

It starts off red, doing nothing else.
When the red square is clicked, it goes black and nothing happens.
Then then when the black square is clicked it gets a blue border and plays.

That doesn’t seem like it’s supposed to work that way. What do the colors mean? Are you sure it’s supposed to behave that way?

11

It is, That’s how I have it set up to do.

red

them image shows
you click that, it plays
you click again, pause.

12

This better explains it:

13

Let the horror show continue. This update adds those images you were wanting. https://jsfiddle.net/y6Lh5svh/13/

2 Likes
14

Thank you.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.