Using OnClick With OnMouseOver

Paul_Wilkins · October 19, 2017, 4:10am

[quote=“asasass, post:41, topic:278598, full:true”]
Then it would be like this?[/quote]

You now have two onmouseover attributes when you need to have only one.

asasass · October 19, 2017, 4:16am

This one then. The one with the code smell, the 2nd one.

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

Paul_Wilkins · October 19, 2017, 4:18am

Looking good, carry on with the next step.

asasass · October 19, 2017, 4:23am

That would be this.

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

or like this:


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

asasass · October 19, 2017, 4:28am

Do I just connect it on like this?

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

Paul_Wilkins · October 19, 2017, 4:34am

No, you have two onmouseover attributes there again. There needs to be only the one.

asasass · October 19, 2017, 4:36am

Why are we renaming play to speaker, so that we show the speaker.?

Then there’ll be 2 speakers and no play, and won’t play.

asasass · October 19, 2017, 4:38am

This goes at the top of the code then.

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

Paul_Wilkins · October 19, 2017, 4:41am

In which step is that?

The objective is that each SVG image has a class name that represents what the image is.
The two vertical lines have the pause name, the speaker has the speaker name, and so on.

asasass · October 19, 2017, 4:43am

I’m doing something wrong here.

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

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

        player.volume=1.0; if (player.paused) {

Paul_Wilkins · October 19, 2017, 4:44am

The onclick needs to have a closing double quote, before you start the onmouseover.

asasass · October 19, 2017, 4:47am

There already is one at the bottom.

Paul_Wilkins · October 19, 2017, 4:47am

Doesn’t matter.

asasass · October 19, 2017, 4:48am

Like that?

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';">


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

        player.volume=1.0; if (player.paused) {

asasass · October 19, 2017, 4:54am

Where exactly do I place the quotes at the end on onclick?

Paul_Wilkins · October 19, 2017, 4:55am

No not like that. You’ve added a right-angled bracket after the onclick closing quote.

Step 3 shows you how it should be structured.

asasass · October 19, 2017, 4:58am

Like that?

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';"

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

        player.volume=1.0; if (player.paused) {

Paul_Wilkins · October 19, 2017, 4:59am

It looks like you have now removed most of the scripting code that was supposed to be in the onclick attribute.

asasass · October 19, 2017, 5:00am

Huh?

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';"

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

        player.volume=1.0; if (player.paused) {
        playButton2.style.border='3px solid #e77d19';
        playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
        playButton2.style.backgroundColor = 'transparent';
        playButton2.style.backgroundRepeat = 'no-repeat';
        playButton2.style.backgroundPosition = 'center'; 
        document.querySelector('#playButton2 .speaker').style.display='none';
        player.play();
        } else {
        playButton2.style.border='3px solid #e77d19';
        playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
        playButton2.style.backgroundColor = 'transparent';    
        playButton2.style.backgroundRepeat = 'no-repeat';
        playButton2.style.backgroundPosition = 'center'; 
        document.querySelector('#playButton2 .pause').style.display='inline-block';
        player.pause();
        }" onmouseover="var player = document.getElementById('player2'); if (!player.paused) {}">

asasass · October 19, 2017, 5:01am

<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=" 
        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';"

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

        player.volume=1.0; if (player.paused) {