Using OnClick With OnMouseOver

JavaScript
164

[quote=“Paul_Wilkins, post:163, topic:278598, full:true”]The problem is that you’ve made the onmouseover and onmouseout code exactly the same.
[/quote]

When you mouse out, you want the pause to hide and the speaker to show. Update the onmouseout code so that it does that.

1 Like
165

Git It!!!

166

Welcome to programming.

1 Like
167

I want to try this one now.

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';
}
168

What do I do with this part?

var player = document.getElementById('player2');
if  (player.paused) {
169

The player needs to exist first before you can add isPlaying to it, so put the var statement before that isPlaying line.

170

Like this?


var player = document.getElementById('player2');
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';
}
2 Likes
171

Got it…

172

What’s the difference between using function, and false?

173

The difference is that the if statement is easier for you, the programmer, to read and understand without needing to study the condition too closely.

Compare this version of the code:

if  (player.paused === false) {
  ...
}

with this improved version of the code:

if  (player.isPlaying()) {
  ...
}

With the second code example, it is much easier to understand that you are interested in whether the player is playing.

174

I have a question, how come I was originally told to use addEventListener, and would that have worked the same way, and, or, maybe that doesn’t belong in this type of code setup?

175

Instead of the onmouseover and onmouseout sections, addEventListener could have been used in the onclick code, where you give it a function that contains what was in each of those sections.

176

How come you chose to go with, onmouseover and onmouseout instead of that?

Any particular reason?

177

Yep. The onclick code happens every time you click on the button, so the second time you click on it, a second set of mouse events would have been added. Eventually you would have hundreds of mouse events being run whenever you click, increasing each time. That is bad.

If you want to use addEventListener though, you can use it at the end of the body, in a <script> block of code instead.

178

no thank you.

179

I have one last question. Do you think

onmouseover=
onmouseout=

should be at the bottom of the code, or at the top, where it currently is?

180

I prefer to order the attributes in terms of importance. The onmouse stuff doesn’t do anything until after the button has been clicked, so moving them after the onclick code makes a lot of sense.

1 Like
181

Got it, ok.

Thank you so much for taking your time to help me with this code, I appreciate it.

2 Likes
182

I just thought I’d see what this process might have been like when coded in a different way.

Here for example is a module to toggle the playing. Each function is small, and simple, and does an effective job.

import images from "./images.js";
import utils from "./utils.js";

var button;
var player;
var icons;

function isPlaying() {
    return player.paused === false;
}
function show(iconName) {
    images.hideAllSVG(button);
    utils.show(icons[iconName]);
}
function toggle() {
    if (isPlaying()) {
        player.pause();
        show("play");
    } else {
        player.play();
        show("pause");
    }
}
function togglePlayingHandler() {
    button.classList.add("triggered");
    toggle();
}
function init(playButton, audioPlayer) {
    button = playButton;
    player = audioPlayer;
    icons = images.getSVGIcons(button);

    player.volume = 1.0;

    button.addEventListener("click", togglePlayingHandler, false);
}
export default {
    init
};

Adding the hover feature means adding an event listener or two to the init section:

    button.addEventListener("mouseover", showPauseHandler, false);
    button.addEventListener("mouseover", showSpeakerHandler, false);

and those event handlers are as simple as the following code:

function showPauseHandler() {
    if (isPlaying()) {
        show("pause");
    }
}
function showSpeakerHandler() {
    if (isPlaying()) {
        show("speaker");
    }
}

That’s all that it takes. When the code is well built, making such changes are easy and effortless, instead of being the slog that we went through here in the previous posts.

6 Likes
183

Wouldn’t it be nice @asasass, if you could use easier to understand code the above, in Blogger?

Wouldn’t that be preferable?