Changing from Play to Pause after Set is clicked

Multi tool use
Multi tool use












1















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;
});
}());









share|improve this question























  • 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 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








  • 1





    Either works, as this in that context references the button element. @MichelleSmith

    – Nathan
    Jan 1 at 5:25


















1















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;
});
}());









share|improve this question























  • 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 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








  • 1





    Either works, as this in that context references the button element. @MichelleSmith

    – Nathan
    Jan 1 at 5:25
















1












1








1








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;
});
}());









share|improve this question














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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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








  • 1





    Either works, as this in that context references the button element. @MichelleSmith

    – Nathan
    Jan 1 at 5:25





















  • 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 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








  • 1





    Either works, as this 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














1 Answer
1






active

oldest

votes


















1














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>








share|improve this answer



















  • 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











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
});


}
});














draft saved

draft discarded


















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









1














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>








share|improve this answer



















  • 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














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>








share|improve this answer



















  • 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








1







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>








share|improve this answer













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>






share|improve this answer












share|improve this answer



share|improve this answer










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














  • 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




















draft saved

draft discarded




















































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.




draft saved


draft discarded














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





















































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
HW1rpFSl6f9Na

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas