asasass
October 19, 2017, 1:43am
22
Like this?
Like this?
<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="
onmouseover="if (!player.paused) {var player = document.getElementById('player2'); }"
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
document.querySelector('#playButton2 .initial').style.display='none';
document.querySelector('#playButton2 .pause').style.display='none';
document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
asasass
October 19, 2017, 1:45am
23
Like this?
onclick="
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
document.querySelector('#playButton2 .initial').style.display='none';
document.querySelector('#playButton2 .pause').style.display='none';
document.querySelector('#playButton2 .play').style.display='none';
onmouseover="if (!player.paused) {var player = document.getElementById('player2'); }"
player.volume=1.0; if (player.paused) {
After the double quote that closes the onclick attribute, is where you put the onmouseover one.
asasass
October 19, 2017, 2:10am
25
Like this?
player.pause();
}" onmouseover="if (!player.paused) {var player = document.getElementById('player2'); }">
asasass:
Like this?
If your code editor show the same coloring for both onclick and onmouseover, then yes.
asasass
October 19, 2017, 2:22am
27
Here, check.
Like this.
Updated
player.pause();
}" onmouseover="if (!player.paused) {var player = document.getElementById('player2');}" onmouseover="var player = document.getElementById('player2'); if (!player.paused) {}">
asasass
October 19, 2017, 2:41am
28
What’s the reason why we put an exclamation point next to player? What does that signify?
(!player.paused)
player.paused will give you either a true or false value. The exclamation mark inverts that, so when it’s not paused (that is, playing) the condition will be true. Using an inversion like that is a code smell, that indicates that things could be improved.
In this case, it would be to instead make the condition more explicit, as:
if (player.paused === false) {
// do when playing
} else {
// do when paused
}
But, it works either way, and I figured that you might not want the longer but more correct one.
An even better solution is to reverse the clauses within the if statement, so that the paused stuff comes first.
if (player.paused) {
// do when paused
} else {
// do when playing
}
That results in the easiest way to organise the if condition.
Most of the time though developing code is not a straight forward process. Instead you end up making small improvements (called refactoring) to improve how the code works without changing what it does, so that the code ends up being easier to maintain, and hopefully easier to understand as well.
3 Likes
asasass
October 19, 2017, 3:27am
30
I’ll make this code using both ways, and keep this saved for future references. Thanks!
asasass
October 19, 2017, 3:31am
31
Like that?
then where would I put the second one?onmouseover="var player = document.getElementById('player2'); if (!player.paused) {}">
onmouseover=" if (player.paused) {
var player = document.getElementById('player2');
} else {
// do when playing
}
Only one of the if statements is required. The first set of curly braces after the (player.paused) condition contain what will be done when the player is paused, and the other set of curly braces after the else clause contain what will be done when the player isn’t paused. That is, when it’s playing.
1 Like
asasass
October 19, 2017, 3:43am
33
I’m not adding this to the code right, I’m not doing any of this the right way. I have no idea what I’m doing.
Go back to the steps and follow them through.
asasass
October 19, 2017, 3:46am
35
I hate jsfiddle cause every time I input a code in to change something, it parses everything within the code and messes everything up.
1 Like
asasass
October 19, 2017, 3:53am
36
How does this look to you?
<div style="visibility: hidden; position: absolute">
<img style="visibility: hidden; position: absolute" src="http://via.placeholder.com/260x260" aria-hidden="true" alt="" />
</div>
<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';
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=" if (player.paused) {
var player = document.getElementById('player2');
} else {
// do when playing
}">
<svg class="initial" width="90" height="108" viewbox="0 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " 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>
<svg class="pause" style="display: none;" width="90" height="108" viewbox="-13 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<svg class="speaker" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
<path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
fill="#1ed760 " fill-rule="evenodd"></path>
</svg>
<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>
</button>
<audio id="player2" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
The onmouseover part is different from what is shown in step 4.
1 Like
asasass
October 19, 2017, 4:00am
38
You said I could set it up like this, I don’t get it.
onmouseover=" if (player.paused) {
var player = document.getElementById('player2');
} else {
// do when playing
}">
That’s all stuff that can be done after you get it working properly.
First follow the steps, and improvements can be made after you have followed those steps.
asasass
October 19, 2017, 4:02am
40
Ok, I’ll do that after I get it working first.
asasass
October 19, 2017, 4:04am
41
Then it would be like this?
<div style="visibility: hidden; position: absolute">
<img style="visibility: hidden; position: absolute" src="http://via.placeholder.com/260x260" aria-hidden="true" alt="" />
</div>
<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';
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="if (!player.paused) {var player = document.getElementById('player2');}" onmouseover="var player = document.getElementById('player2'); if (!player.paused) {}">
<svg class="initial" width="90" height="108" viewbox="0 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " 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>
<svg class="pause" style="display: none;" width="90" height="108" viewbox="-13 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<svg class="speaker" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
<path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
fill="#1ed760 " fill-rule="evenodd"></path>
</svg>
<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>
</button>
<audio id="player2" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
