I recommend that you return back to the working code that you had in https://jsfiddle.net/j0g522ta/9/ and with the knowledge that you now have, follow the steps through step by step.
I have that here:
This one has what I’m up to with the new code added to it.
The last thing I did correctly was this:
player.pause();
}" onmouseover="var player = document.getElementById('player2'); if (!player.paused) {}">
Good one, it looks like you’ve done up to step 5. Carry on with step 6 now.
That’s what I’m stuck on.
You can’t place onmouseover right next to button id?
I don’t get that.
<button id="playButton2" ... onmouseover=".
Does it go before onclick?
Each attribute (whether it be id, onclick, onmouseover, or other attributes) can be placed in any order.
Ok, then, let’s do it in the order in which the actions take place.
onclick - onmouseover - onmouseout
I think that would be best.
This would all be part of onclick, right?
So, then I would need to put, onmouseover after this, right?
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) {
or, does
player.volume=1.0; if (player.paused) {
Stay where it’s at?
It looks like that stays as the last part of the code before elements are added. And maybe it should stay like that.
The mouse movement doesn’t affect the volume.
I’m confused about how to set all this up.
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);"
onmouseover="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){}">
onmouseout=" if (!player.paused) { document.querySelector('#playButton2 .speaker').style.display='none'; document.querySelector('#playButton2 .pause').style.display='inline-block';}">
There should be only one of each attribute name. You have used onmouseout twice there which is not allowed.
There:
player.volume=1.0; if (player.paused);
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';}
{
It looks like you are missing a closing quote for the onclick, onmouseover, and onmouseout attributes.
Which way?
onmouseout=" if (!player.paused) { document.querySelector('#playButton2 .speaker').style.display='none'; document.querySelector('#playButton2 .pause').style.display='inline-block';}"
or
onmouseout=" if (!player.paused) { document.querySelector('#playButton2 .speaker').style.display='none'; document.querySelector('#playButton2 .pause').style.display='inline-block';"}
The former.
You’ve placed the onmouseover and onmouseout sections in the middle of the onclick code. That’s where you went wrong there.
I thought you said I could place them after onlick, anywhere I wanted?
What did you mean then?
Everything between the opening double quotes and the end double quotes are a part of the onclick attribute.
As I said before:
The playButton2 code from the jsfiddle that you most recently posted, all needs to be with the onclick event.