One last minor thing, changing the ! to else.
There are only 2 of them.
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.
Removed a bad closing brace
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.
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.
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.