Using OnClick With OnMouseOver

One last minor thing, changing the ! to else.

There are only 2 of them.

The hover code has nothing to do when the button isn’t playing.

You’d be better off just changing !player.paused to player.paused === false

So, then don’t use this one is what you’re saying.

 onmouseover=" if  (player.paused) {
 var player = document.getElementById('player2');
} else {
  // do when playing
}
{document.querySelector('#playButton2 .speaker').style.display='none'; document.querySelector('#playButton2 .pause').style.display='inline-block';}"



onmouseout=" if  (player.paused) {
 var player = document.getElementById('player2');
} else {
  // do when playing
}

{ document.querySelector('#playButton2 .pause').style.display='none'; document.querySelector('#playButton2 .speaker').style.display='inline-block';}"

Show me both ways so I know, but I’m going to go with your way.

We’ll do 2 examples.

if  (player.paused === false) {
  // do when playing
} else {
  // do when paused
}

if  (player.paused) {
  // do when paused
} else {
  // do when playing
}

How come one has do when playing 1st ?

And the other has do when paused 1st ?

In your situation, you want the hover to only do something when the player isn’t playing right? The code using an else clause for that, would be:

if  (player.paused) {
  // do nothing
} else {
  document.querySelector('#playButton2 .speaker').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='inline-block';
}

Because there is nothing to do before the else, you end up with an empty block of code, which is a bad design.

That’s why the boolean value from player.paused was negated, so that the code below the else section gets run in the upper section.

if  (!player.paused) {
  document.querySelector('#playButton2 .speaker').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='inline-block';
} else {
  // do nothing
}

And you can easily see that the else clause ends up doing nothing.

Optionally, instead of negating things, you can check if the condition is false.

if  (player.paused === false) {
  document.querySelector('#playButton2 .speaker').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='inline-block';
}

The last option is to put that condition in a function:

player.isPlaying = function () {
    return player.paused === false;
}
if  (player.isPlaying()) {
  document.querySelector('#playButton2 .speaker').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='inline-block';
}

Moving things out to a function ends up making the code easier to understand.

Edit:

Removed a bad closing brace

2 Likes

Where do I close off the quotes?

onmouseover="if  (player.paused === false) {
  document.querySelector('#playButton2 .speaker').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='inline-block';}
}

I think I got it.

 document.querySelector('#playButton2 .pause').style.display='inline-block';}
}"

Whoops sorry, remove one of those closing braces. I’ll edit the post too.

1 Like

Did I do something wrong here?

It works for me.

There’s no hover

Is this supposed to be in the code?

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

Okay, time for the console.

You need to put back the code that says var player = ...

Can you edit your example to include that.

No, because it’s not relevant to the topic of if statements and else conditions.

Like this?

onmouseover="
var player = document.getElementById('player2');
if  (player.paused === false) {
  document.querySelector('#playButton2 .speaker').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='inline-block';}"

That looks like it should work.

1 Like

It’s not.

This is the original working version:

onmouseover="
var player = document.getElementById('player2');
if (!player.paused) {document.querySelector('#playButton2 .speaker').style.display='none'; document.querySelector('#playButton2 .pause').style.display='inline-block';}"

The problem is that you’ve made the onmouseover and onmouseout code exactly the same.