Changing from Play to Pause after Set is clicked

Multi tool use
How would I set this up so that the button changes from play to pause after 'Set' is clicked.
Pressing 'Set' would trigger the svg to change to the pause button.
Code:
https://jsfiddle.net/192h0w85/195/
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
});
}());
javascript
|
show 1 more comment
How would I set this up so that the button changes from play to pause after 'Set' is clicked.
Pressing 'Set' would trigger the svg to change to the pause button.
Code:
https://jsfiddle.net/192h0w85/195/
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
});
}());
javascript
But what is "Set"?
– lucas
Jan 1 at 4:53
It's in the jsfiddle: jsfiddle.net/192h0w85/195
– Michelle Smith
Jan 1 at 4:54
1
You could just addbutton.classList.toggle('is-playing');
to yoursent
click event handler. Is this what you are looking for?
– Nathan
Jan 1 at 4:55
Should I change the first one to button too, instead of this? Changing 'this' to 'button' this.classList.toggle('is-playing')
– Michelle Smith
Jan 1 at 5:19
1
Either works, asthis
in that context references the button element. @MichelleSmith
– Nathan
Jan 1 at 5:25
|
show 1 more comment
How would I set this up so that the button changes from play to pause after 'Set' is clicked.
Pressing 'Set' would trigger the svg to change to the pause button.
Code:
https://jsfiddle.net/192h0w85/195/
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
});
}());
javascript
How would I set this up so that the button changes from play to pause after 'Set' is clicked.
Pressing 'Set' would trigger the svg to change to the pause button.
Code:
https://jsfiddle.net/192h0w85/195/
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
});
}());
javascript
javascript
asked Jan 1 at 4:47
Michelle SmithMichelle Smith
336
336
But what is "Set"?
– lucas
Jan 1 at 4:53
It's in the jsfiddle: jsfiddle.net/192h0w85/195
– Michelle Smith
Jan 1 at 4:54
1
You could just addbutton.classList.toggle('is-playing');
to yoursent
click event handler. Is this what you are looking for?
– Nathan
Jan 1 at 4:55
Should I change the first one to button too, instead of this? Changing 'this' to 'button' this.classList.toggle('is-playing')
– Michelle Smith
Jan 1 at 5:19
1
Either works, asthis
in that context references the button element. @MichelleSmith
– Nathan
Jan 1 at 5:25
|
show 1 more comment
But what is "Set"?
– lucas
Jan 1 at 4:53
It's in the jsfiddle: jsfiddle.net/192h0w85/195
– Michelle Smith
Jan 1 at 4:54
1
You could just addbutton.classList.toggle('is-playing');
to yoursent
click event handler. Is this what you are looking for?
– Nathan
Jan 1 at 4:55
Should I change the first one to button too, instead of this? Changing 'this' to 'button' this.classList.toggle('is-playing')
– Michelle Smith
Jan 1 at 5:19
1
Either works, asthis
in that context references the button element. @MichelleSmith
– Nathan
Jan 1 at 5:25
But what is "Set"?
– lucas
Jan 1 at 4:53
But what is "Set"?
– lucas
Jan 1 at 4:53
It's in the jsfiddle: jsfiddle.net/192h0w85/195
– Michelle Smith
Jan 1 at 4:54
It's in the jsfiddle: jsfiddle.net/192h0w85/195
– Michelle Smith
Jan 1 at 4:54
1
1
You could just add
button.classList.toggle('is-playing');
to your sent
click event handler. Is this what you are looking for?– Nathan
Jan 1 at 4:55
You could just add
button.classList.toggle('is-playing');
to your sent
click event handler. Is this what you are looking for?– Nathan
Jan 1 at 4:55
Should I change the first one to button too, instead of this? Changing 'this' to 'button' this.classList.toggle('is-playing')
– Michelle Smith
Jan 1 at 5:19
Should I change the first one to button too, instead of this? Changing 'this' to 'button' this.classList.toggle('is-playing')
– Michelle Smith
Jan 1 at 5:19
1
1
Either works, as
this
in that context references the button element. @MichelleSmith– Nathan
Jan 1 at 5:25
Either works, as
this
in that context references the button element. @MichelleSmith– Nathan
Jan 1 at 5:25
|
show 1 more comment
1 Answer
1
active
oldest
votes
You already have button click event added
You can just trigger that click to have a changed icons
So, your code will look like this
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
button.click();
});
}());
Note: button.click();
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
button.click();
});
}());
body {
background-color: black;
}
.btn {
position: relative;
width: 200px;
height: 200px;
cursor: pointer;
}
.btn .play,
.btn .pause {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.play {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.play path {
fill: blue;
}
.pause {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.pause path {
fill: blue;
}
.pause {
display: none;
}
.is-playing .play {
display: none;
}
.is-playing .pause {
display: block;
}
.label {
font-size: 22px;
color: blue;
font-family: Tahoma;
}
.info {
display: table-cell;
white-space: nowrap;
}
.input {
font-size: 22px;
width: 200px;
margin-top: 40px;
background: black;
color: blue;
}
.sent {
font-size: 22px;
background: black;
color: blue;
cursor: pointer;
font-family: Tahoma;
}
<audio autoplay id="player"></audio>
<div id="button" class="btn">
<svg class="play hide" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M9.846 16.86c-.467.303-.846.097-.846-.45V7.588c0-.551.38-.752.846-.45l6.91 4.48c.324.21.327.549 0 .761l-6.91 4.48z">
</path></svg>
<svg class="pause" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M8 7.596c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596H8.607A.602.602 0 0 1 8 16.404V7.596zm5 0c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596h-1.786a.602.602 0 0 1-.607-.596V7.596z">
</path></svg>
</div>
<div class="info">
<label class="label" for="input">Text</label>
<input class="input" id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
<input class="sent" id="sent" type="submit" value="Set" />
</div>
1
@MichelleSmith you can its up to you, I added trigger solution because I do not have to write the same code again, you can write toggle class or create common function to do this work for you.
– Just code
Jan 1 at 5:19
1
@MichelleSmith in that case the best I can advice is to create function that accepts arguments with play pause and you pass it to function from your clicks and function will do the work for you.
– Just code
Jan 1 at 6:11
1
@MichelleSmith here you go jsfiddle.net/192h0w85/204
– Just code
Jan 1 at 6:20
1
@MichelleSmith check this you should use this jsfiddle.net/192h0w85/209
– Just code
Jan 1 at 6:30
1
@MichelleSmith you do not need new keyword, everything else looks good to me
– Just code
Jan 1 at 6:43
|
show 6 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993067%2fchanging-from-play-to-pause-after-set-is-clicked%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You already have button click event added
You can just trigger that click to have a changed icons
So, your code will look like this
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
button.click();
});
}());
Note: button.click();
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
button.click();
});
}());
body {
background-color: black;
}
.btn {
position: relative;
width: 200px;
height: 200px;
cursor: pointer;
}
.btn .play,
.btn .pause {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.play {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.play path {
fill: blue;
}
.pause {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.pause path {
fill: blue;
}
.pause {
display: none;
}
.is-playing .play {
display: none;
}
.is-playing .pause {
display: block;
}
.label {
font-size: 22px;
color: blue;
font-family: Tahoma;
}
.info {
display: table-cell;
white-space: nowrap;
}
.input {
font-size: 22px;
width: 200px;
margin-top: 40px;
background: black;
color: blue;
}
.sent {
font-size: 22px;
background: black;
color: blue;
cursor: pointer;
font-family: Tahoma;
}
<audio autoplay id="player"></audio>
<div id="button" class="btn">
<svg class="play hide" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M9.846 16.86c-.467.303-.846.097-.846-.45V7.588c0-.551.38-.752.846-.45l6.91 4.48c.324.21.327.549 0 .761l-6.91 4.48z">
</path></svg>
<svg class="pause" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M8 7.596c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596H8.607A.602.602 0 0 1 8 16.404V7.596zm5 0c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596h-1.786a.602.602 0 0 1-.607-.596V7.596z">
</path></svg>
</div>
<div class="info">
<label class="label" for="input">Text</label>
<input class="input" id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
<input class="sent" id="sent" type="submit" value="Set" />
</div>
1
@MichelleSmith you can its up to you, I added trigger solution because I do not have to write the same code again, you can write toggle class or create common function to do this work for you.
– Just code
Jan 1 at 5:19
1
@MichelleSmith in that case the best I can advice is to create function that accepts arguments with play pause and you pass it to function from your clicks and function will do the work for you.
– Just code
Jan 1 at 6:11
1
@MichelleSmith here you go jsfiddle.net/192h0w85/204
– Just code
Jan 1 at 6:20
1
@MichelleSmith check this you should use this jsfiddle.net/192h0w85/209
– Just code
Jan 1 at 6:30
1
@MichelleSmith you do not need new keyword, everything else looks good to me
– Just code
Jan 1 at 6:43
|
show 6 more comments
You already have button click event added
You can just trigger that click to have a changed icons
So, your code will look like this
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
button.click();
});
}());
Note: button.click();
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
button.click();
});
}());
body {
background-color: black;
}
.btn {
position: relative;
width: 200px;
height: 200px;
cursor: pointer;
}
.btn .play,
.btn .pause {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.play {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.play path {
fill: blue;
}
.pause {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.pause path {
fill: blue;
}
.pause {
display: none;
}
.is-playing .play {
display: none;
}
.is-playing .pause {
display: block;
}
.label {
font-size: 22px;
color: blue;
font-family: Tahoma;
}
.info {
display: table-cell;
white-space: nowrap;
}
.input {
font-size: 22px;
width: 200px;
margin-top: 40px;
background: black;
color: blue;
}
.sent {
font-size: 22px;
background: black;
color: blue;
cursor: pointer;
font-family: Tahoma;
}
<audio autoplay id="player"></audio>
<div id="button" class="btn">
<svg class="play hide" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M9.846 16.86c-.467.303-.846.097-.846-.45V7.588c0-.551.38-.752.846-.45l6.91 4.48c.324.21.327.549 0 .761l-6.91 4.48z">
</path></svg>
<svg class="pause" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M8 7.596c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596H8.607A.602.602 0 0 1 8 16.404V7.596zm5 0c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596h-1.786a.602.602 0 0 1-.607-.596V7.596z">
</path></svg>
</div>
<div class="info">
<label class="label" for="input">Text</label>
<input class="input" id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
<input class="sent" id="sent" type="submit" value="Set" />
</div>
1
@MichelleSmith you can its up to you, I added trigger solution because I do not have to write the same code again, you can write toggle class or create common function to do this work for you.
– Just code
Jan 1 at 5:19
1
@MichelleSmith in that case the best I can advice is to create function that accepts arguments with play pause and you pass it to function from your clicks and function will do the work for you.
– Just code
Jan 1 at 6:11
1
@MichelleSmith here you go jsfiddle.net/192h0w85/204
– Just code
Jan 1 at 6:20
1
@MichelleSmith check this you should use this jsfiddle.net/192h0w85/209
– Just code
Jan 1 at 6:30
1
@MichelleSmith you do not need new keyword, everything else looks good to me
– Just code
Jan 1 at 6:43
|
show 6 more comments
You already have button click event added
You can just trigger that click to have a changed icons
So, your code will look like this
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
button.click();
});
}());
Note: button.click();
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
button.click();
});
}());
body {
background-color: black;
}
.btn {
position: relative;
width: 200px;
height: 200px;
cursor: pointer;
}
.btn .play,
.btn .pause {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.play {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.play path {
fill: blue;
}
.pause {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.pause path {
fill: blue;
}
.pause {
display: none;
}
.is-playing .play {
display: none;
}
.is-playing .pause {
display: block;
}
.label {
font-size: 22px;
color: blue;
font-family: Tahoma;
}
.info {
display: table-cell;
white-space: nowrap;
}
.input {
font-size: 22px;
width: 200px;
margin-top: 40px;
background: black;
color: blue;
}
.sent {
font-size: 22px;
background: black;
color: blue;
cursor: pointer;
font-family: Tahoma;
}
<audio autoplay id="player"></audio>
<div id="button" class="btn">
<svg class="play hide" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M9.846 16.86c-.467.303-.846.097-.846-.45V7.588c0-.551.38-.752.846-.45l6.91 4.48c.324.21.327.549 0 .761l-6.91 4.48z">
</path></svg>
<svg class="pause" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M8 7.596c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596H8.607A.602.602 0 0 1 8 16.404V7.596zm5 0c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596h-1.786a.602.602 0 0 1-.607-.596V7.596z">
</path></svg>
</div>
<div class="info">
<label class="label" for="input">Text</label>
<input class="input" id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
<input class="sent" id="sent" type="submit" value="Set" />
</div>
You already have button click event added
You can just trigger that click to have a changed icons
So, your code will look like this
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
button.click();
});
}());
Note: button.click();
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
button.click();
});
}());
body {
background-color: black;
}
.btn {
position: relative;
width: 200px;
height: 200px;
cursor: pointer;
}
.btn .play,
.btn .pause {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.play {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.play path {
fill: blue;
}
.pause {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.pause path {
fill: blue;
}
.pause {
display: none;
}
.is-playing .play {
display: none;
}
.is-playing .pause {
display: block;
}
.label {
font-size: 22px;
color: blue;
font-family: Tahoma;
}
.info {
display: table-cell;
white-space: nowrap;
}
.input {
font-size: 22px;
width: 200px;
margin-top: 40px;
background: black;
color: blue;
}
.sent {
font-size: 22px;
background: black;
color: blue;
cursor: pointer;
font-family: Tahoma;
}
<audio autoplay id="player"></audio>
<div id="button" class="btn">
<svg class="play hide" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M9.846 16.86c-.467.303-.846.097-.846-.45V7.588c0-.551.38-.752.846-.45l6.91 4.48c.324.21.327.549 0 .761l-6.91 4.48z">
</path></svg>
<svg class="pause" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M8 7.596c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596H8.607A.602.602 0 0 1 8 16.404V7.596zm5 0c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596h-1.786a.602.602 0 0 1-.607-.596V7.596z">
</path></svg>
</div>
<div class="info">
<label class="label" for="input">Text</label>
<input class="input" id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
<input class="sent" id="sent" type="submit" value="Set" />
</div>
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
button.click();
});
}());
body {
background-color: black;
}
.btn {
position: relative;
width: 200px;
height: 200px;
cursor: pointer;
}
.btn .play,
.btn .pause {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.play {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.play path {
fill: blue;
}
.pause {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.pause path {
fill: blue;
}
.pause {
display: none;
}
.is-playing .play {
display: none;
}
.is-playing .pause {
display: block;
}
.label {
font-size: 22px;
color: blue;
font-family: Tahoma;
}
.info {
display: table-cell;
white-space: nowrap;
}
.input {
font-size: 22px;
width: 200px;
margin-top: 40px;
background: black;
color: blue;
}
.sent {
font-size: 22px;
background: black;
color: blue;
cursor: pointer;
font-family: Tahoma;
}
<audio autoplay id="player"></audio>
<div id="button" class="btn">
<svg class="play hide" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M9.846 16.86c-.467.303-.846.097-.846-.45V7.588c0-.551.38-.752.846-.45l6.91 4.48c.324.21.327.549 0 .761l-6.91 4.48z">
</path></svg>
<svg class="pause" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M8 7.596c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596H8.607A.602.602 0 0 1 8 16.404V7.596zm5 0c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596h-1.786a.602.602 0 0 1-.607-.596V7.596z">
</path></svg>
</div>
<div class="info">
<label class="label" for="input">Text</label>
<input class="input" id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
<input class="sent" id="sent" type="submit" value="Set" />
</div>
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function() {
this.classList.toggle('is-playing')
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function() {
player.volume = 1.0;
player.src = value.value;
button.click();
});
}());
body {
background-color: black;
}
.btn {
position: relative;
width: 200px;
height: 200px;
cursor: pointer;
}
.btn .play,
.btn .pause {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.play {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.play path {
fill: blue;
}
.pause {
fill: #000000;
border: 3px solid blue;
border-radius: 50%;
}
.pause path {
fill: blue;
}
.pause {
display: none;
}
.is-playing .play {
display: none;
}
.is-playing .pause {
display: block;
}
.label {
font-size: 22px;
color: blue;
font-family: Tahoma;
}
.info {
display: table-cell;
white-space: nowrap;
}
.input {
font-size: 22px;
width: 200px;
margin-top: 40px;
background: black;
color: blue;
}
.sent {
font-size: 22px;
background: black;
color: blue;
cursor: pointer;
font-family: Tahoma;
}
<audio autoplay id="player"></audio>
<div id="button" class="btn">
<svg class="play hide" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M9.846 16.86c-.467.303-.846.097-.846-.45V7.588c0-.551.38-.752.846-.45l6.91 4.48c.324.21.327.549 0 .761l-6.91 4.48z">
</path></svg>
<svg class="pause" width="200" height="200" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12"> </circle>
<path d="M8 7.596c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596H8.607A.602.602 0 0 1 8 16.404V7.596zm5 0c0-.33.277-.596.607-.596h1.786c.335 0 .607.267.607.596v8.808a.605.605 0 0 1-.607.596h-1.786a.602.602 0 0 1-.607-.596V7.596z">
</path></svg>
</div>
<div class="info">
<label class="label" for="input">Text</label>
<input class="input" id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
<input class="sent" id="sent" type="submit" value="Set" />
</div>
answered Jan 1 at 4:54


Just codeJust code
10.4k53066
10.4k53066
1
@MichelleSmith you can its up to you, I added trigger solution because I do not have to write the same code again, you can write toggle class or create common function to do this work for you.
– Just code
Jan 1 at 5:19
1
@MichelleSmith in that case the best I can advice is to create function that accepts arguments with play pause and you pass it to function from your clicks and function will do the work for you.
– Just code
Jan 1 at 6:11
1
@MichelleSmith here you go jsfiddle.net/192h0w85/204
– Just code
Jan 1 at 6:20
1
@MichelleSmith check this you should use this jsfiddle.net/192h0w85/209
– Just code
Jan 1 at 6:30
1
@MichelleSmith you do not need new keyword, everything else looks good to me
– Just code
Jan 1 at 6:43
|
show 6 more comments
1
@MichelleSmith you can its up to you, I added trigger solution because I do not have to write the same code again, you can write toggle class or create common function to do this work for you.
– Just code
Jan 1 at 5:19
1
@MichelleSmith in that case the best I can advice is to create function that accepts arguments with play pause and you pass it to function from your clicks and function will do the work for you.
– Just code
Jan 1 at 6:11
1
@MichelleSmith here you go jsfiddle.net/192h0w85/204
– Just code
Jan 1 at 6:20
1
@MichelleSmith check this you should use this jsfiddle.net/192h0w85/209
– Just code
Jan 1 at 6:30
1
@MichelleSmith you do not need new keyword, everything else looks good to me
– Just code
Jan 1 at 6:43
1
1
@MichelleSmith you can its up to you, I added trigger solution because I do not have to write the same code again, you can write toggle class or create common function to do this work for you.
– Just code
Jan 1 at 5:19
@MichelleSmith you can its up to you, I added trigger solution because I do not have to write the same code again, you can write toggle class or create common function to do this work for you.
– Just code
Jan 1 at 5:19
1
1
@MichelleSmith in that case the best I can advice is to create function that accepts arguments with play pause and you pass it to function from your clicks and function will do the work for you.
– Just code
Jan 1 at 6:11
@MichelleSmith in that case the best I can advice is to create function that accepts arguments with play pause and you pass it to function from your clicks and function will do the work for you.
– Just code
Jan 1 at 6:11
1
1
@MichelleSmith here you go jsfiddle.net/192h0w85/204
– Just code
Jan 1 at 6:20
@MichelleSmith here you go jsfiddle.net/192h0w85/204
– Just code
Jan 1 at 6:20
1
1
@MichelleSmith check this you should use this jsfiddle.net/192h0w85/209
– Just code
Jan 1 at 6:30
@MichelleSmith check this you should use this jsfiddle.net/192h0w85/209
– Just code
Jan 1 at 6:30
1
1
@MichelleSmith you do not need new keyword, everything else looks good to me
– Just code
Jan 1 at 6:43
@MichelleSmith you do not need new keyword, everything else looks good to me
– Just code
Jan 1 at 6:43
|
show 6 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993067%2fchanging-from-play-to-pause-after-set-is-clicked%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
vAStJc1ZEbfM19LW ClBTJD hCZm
But what is "Set"?
– lucas
Jan 1 at 4:53
It's in the jsfiddle: jsfiddle.net/192h0w85/195
– Michelle Smith
Jan 1 at 4:54
1
You could just add
button.classList.toggle('is-playing');
to yoursent
click event handler. Is this what you are looking for?– Nathan
Jan 1 at 4:55
Should I change the first one to button too, instead of this? Changing 'this' to 'button' this.classList.toggle('is-playing')
– Michelle Smith
Jan 1 at 5:19
1
Either works, as
this
in that context references the button element. @MichelleSmith– Nathan
Jan 1 at 5:25