Using OnClick With OnMouseOver

onmouseover would need to go in between here?

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent  174px, #0059dd 174px, #0059dd 177px, transparent 177px ); border: 3px solid #0059dd;" 


onclick="

Like This?

Updated

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent  174px, #0059dd 174px, #0059dd 177px, transparent 177px ); border: 3px solid #0059dd;" 

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

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

onclick=" 
        var button = document.getElementById('playButton2');
        var player = document.getElementById('player2');
          document.querySelector('#playButton2 .initial').style.display='none';
          document.querySelector('#playButton2 .speaker').style.display='none';
          document.querySelector('#playButton2 .play').style.display='none';
        player.volume=1.0; if (player.paused) {

It looks like the code in onmouseover is missing a closing curly brace.

I just added it in.

You also have another onmouseover section after the onclick code, which you should remove.

huh. ? no?

Step 4:<button id=“playButton2” … onmouseover=

Step 6:<button id=“playButton2” … onmouseover=

On your latest code at https://jsfiddle.net/xzfc7254/5/ look at both line 9 and line 35. One of those two onmouseover sections will have to be removed.

Done, as you said:

It’s not working as expected, what’s wrong?

What did I mess up on?

Step 4 last line of code, has the var player piece that you’re missing from each of the mouse sections.

onmouseover="var player = document.getElementById('player2'); if (!player.paused) {}" 

onmouseout=" var player = document.getElementById('player2'); if (!player.paused){}"

Instead of:

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

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

I don’t understand.

The player variable needs to be declared first, before code can make use of it.

Each event, such as onclick, or onmouseover, or onmouseout, is seen by the browser as a different section of code. Variables declared in one section aren’t known about by the others, which results in some duplication.

This duplication can be removed, but means moving away from the inline events. While we are still with inline events it’s something that just needs to be lived with.

For example, how would I put this:

onmouseover="var player = document.getElementById('player2'); if (!player.paused) {}"

inside this?

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

Like this?


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

Replace if (!player.paused) {} from the first with the code from the second.

1 Like

onmouseover="var player = document.getElementById('player2'); if (!player.paused) {}"

becomes this:

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

Like this?

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

That’s what you get when you remove the if (!player.paused) {}

I didn’t tell you do do that, did I. I told you to:

Yes, that’s looking better.

Like this then?

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

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

When I pause it I want the play svg to show.

  <svg class="play" style="display: none;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

And after you click on it, the pause button doesn’t appear right away.

What do I need to do to fix those 2 things?