I have a play/pause button and I want to check whether its text is "Play" or "Pause" when the user clicks on it.
window.PlayPauseButton = document.getElementById("PlayPauseButton");
PlayPauseButton.onclick = function() //when you click the play or pause button
{
if( window.PlayPauseButton.innerHTML == "Pause" )
{
window.PlayPauseButton.innerHTML = "Play";
clearInterval( window.TheTimer );
}
else
{
window.PlayPauseButton.innerHTML = "Pause";
}
};
But it doesn't work! I can't compare innerHTML with a string.
You need to check with innerText, not innerHTML
PlayPauseButton.onclick = function() //when you click the play or pause button
{
if( window.PlayPauseButton.innerText== "Pause" )
{
window.PlayPauseButton.innerText= "Play";
clearInterval( window.TheTimer );
}
else
{
window.PlayPauseButton.innerText= "Pause";
}
};
If you're using a button tag, try using innerText instead:
if (window.PlayPauseButton.innerText == "Pause" ){
window.PlayPauseButton.innerHTML = "Play";
clearInterval( window.TheTimer );
}
else {
window.PlayPauseButton.innerHTML = "Pause";
}
This will only work if you're using <button>Play</button>.
If you're using an <input type="button"> you're going to need to compare the value instead of innerText.
Related
I'm writing a game that lets 2 players take turns playing. After a player makes a viable move, the blank element covers the whole screen and a prompt would then appear to ask if they should proceed to the next turn. The blank element will be removed to show the game after OK is clicked on prompt.
However, the prompt would appear right after the viable move was made instead of after the style change. So the blank cover would never appear on screen if the user clicks OK. The only way for the style change to happen is if the user clicks cancel on the prompt.
Is there some way to make the prompt happen after a style change?
Just an example code
var nextTurn;
cover.style.visibility='hidden';
function displaySwitch(){
if(turn == 0){
cover.style.visibility='visible';
nextTurn = confirm("Click OK for next turn");
if(nextTurn == true){
cover.style.visibility='hidden';
turn++;
}
}else if(turn == 1){
cover.style.visibility='visible';
nextTurn = confirm("Click OK for next turn");
if(nextTurn == true){
cover.style.visibility='hidden';
turn--;
}
}
}
You could consider using setTimeout(() => { ... }). This allows the browser to do stuff (e.g. rendering) before continuing your code. Note that you might run into issues if you have code after a call to setTimeout, so you might have to change a lot of code. (For example, see MDN's docs for setTimeout.)
let nextTurn;
cover.style.visibility = 'hidden';
function displaySwitch() {
if(turn == 0) {
cover.style.visibility = 'visible';
setTimeout(() => {
nextTurn = prompt("Click OK for next turn");
if(nextTurn == true) {
cover.style.visibility = 'hidden';
turn++;
}
});
} else if(turn == 1) {
setTimeout(() => {
nextTurn = prompt("Click OK for next turn");
if(nextTurn == true) {
cover.style.visibility = 'hidden';
turn--;
}
});
}
}
...
setTimeout(displaySwitch, 0);
Note: if you need to support older browsers and aren't doing any pre-processing, replace () => { ... } with function() { ... } and let with var.
Use setTimeout with at least 50ms.
And you better use confirm instead of prompt because prompt returns an input value.
if (turn == 0) {
cover.style.visibility = 'visible';
setTimeout(function() {
nextTurn = confirm("Click OK for next turn");
if (nextTurn == true) {
cover.style.visibility = 'hidden';
turn++;
}
}, 50);
} else if (turn == 1) {
cover.style.visibility = 'visible'
setTimeout(function() {
nextTurn = confirm("Click OK for next turn");
if (nextTurn == true) {
cover.style.visibility = 'hidden';
turn--;
}
}, 50);
}
I want some text to go red when a button is clicked.
The button can be clicked many times and will make the text stay red.
After a bit of not clicking the button, the text should go back to black.
Here is a JSFiddle of what I tried: https://jsfiddle.net/9tdschym/1/
<p class="text">Text</p>
<button>Click</button>
.clicked {
color: red;
}
let text = document.querySelector( '.text' )
let btn = document.querySelector( 'button' )
btn.onclick = () => {
text.classList.add( 'clicked' )
setTimeout(() => {
text.classList.remove( 'clicked' )
}, 500)
}
I can't use a setTimeout because then there would be many setTimeout calls in the stack thus messing up what I am trying to achieve.
I know I can probably hardcode a solution by using a variable to check if it has been clicked along with some other checks to check when it was last clicked but I think there is a better solution out there.
Just changed to toggle and added a bit more time. Seems to work now.
Added a flag to prevent multi clicks.
// Text will change for (n) milliseconds on click.
// Further clicks will reset timeout
let text = document.querySelector( '.text' )
let btn = document.querySelector( 'button' )
let timer = undefined;
btn.onclick = () => {
if(timer !== undefined) {
clearTimeout(timer);
} else {
text.classList.toggle( 'clicked' )
}
timer = setTimeout(() => {
text.classList.toggle( 'clicked' );
timer = undefined;
}, 1500)
}
.clicked {
color: red;
}
<p class="text">Text</p>
<button>Click</button>
It actually works but you need to enter 5000 because this works in milliseconds
This might do it for you. A simple adjustment by checking if its active or not
let text = document.querySelector( '.text' )
let btn = document.querySelector( 'button' )
let active = false
btn.onclick = () => {
if(!active){
text.classList.add( 'clicked' )
active = true;
setTimeout(() => {
text.classList.remove( 'clicked' )
active = false;
}, 1500)
}
}
.clicked {
color: red;
}
<p class="text">Text</p>
<button>Click</button>
I'm working on a music player using Javascript/JQuery but I don't quite get how to write out the conditions. The way I want to set it up is
if(currentSong is paused AND the play button is clicked){
//do something
}else if(currentSong is playing AND pause button is clicked){
//do something else
}
So far I have,
var togglePlayButton = function(){
var $playPauseButton = $('.main .play-pause');
if(currentSong.isPaused() && $playPauseButton.html(playButton).clicked == true){
//do something
}else if(currentSong && $playPauseButton.html(pauseButton).clicked == true){
//do something else
}
}
$(document).ready(function() {
$playPauseButton.click(togglePlayButton);
});
What can I do to get a boolean value for the case of the play/pause being clicked? Thanks!
var isClicked = false;
$playPauseButton.click(function(){
if(isClicked == false){
isClicked = true;
} else {
isClicked = false;
}
Make a variable called isClicked and set its value to false. Then make a function that runs when the play pause button is clicked that changes the value from false to true if it’s value is false. Else it will change its value to false.
I have a button that plays and stops a video. How can I toggle between the .play() and .pause() efficiently?
<button id="thebutton" onclick="BV.getPlayer().play();"></button>
First off, I would suggest not using inline event handlers. If you're using jQuery, then I suggest you use that.
After each click, set a variable to tell whether it's playing or not, then trigger the correct action.
$(function(){
$('#thebutton').click(function(){
var isPlaying = $(this).data('isplaying');
if(isPlaying){
BV.getPlayer().pause();
}
else{
BV.getPlayer().play();
}
$(this).data('isplaying', !isPlaying);
});
});
jQuery used to have a .toggle() "event", but it was removed.
Add a class that acts as check for the player status. And then use this code.
$("#theButton").click(function() {
if($(this).hasClass('playing')) {
BV.getPlayer().pause();
} else {
BV.getPlayer().play();
}
$(this).toggleClass('playing')
})
$('#thebutton').click(function() {
if ($(this).val() == "play") {
$(this).val("pause");
play_int();
}
else {
$(this).val("play");
play_pause();
}
});
or
$(function(){
$('#play').click(function() {
// if the play button value is 'play', call the play function
// otherwise call the pause function
$(this).val() == "play" ? play_int() : play_pause();
});
});
function play_int() {
$('#play').val("pause");
// do play
}
function play_pause() {
$('#play').val("play");
// do pause
}
aka
jquery toggle button value
var isPlaying = false;
var player = BV.getPlayer();
$("#thebutton").click(function() {
if (isPlaying) {
player.pause();
isPlaying = false;
} else {
player.play();
isPlaying = true;
}
});
Currently I have a button which changes its text from Pause to Resume when clicking on it. I use jQuery and toggle for this:
$(document).ready(function() {
$("#pause").click(function() {
$("td").toggle();
$(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
});
});
This all works. I also have 2 functions:
function pauseTimer()
function startTimer()
How do I "integrate" these two functions into my toggle code? So when I hit Pause it will toggle the text to Resume AND also use the function pauseTimer() and if I hit the button again, the text will change back to Pause and also use StartTimer()?
Thanks
$(this).html() == "Pause" ? pauseTimer() : startTimer();
Will work. You have to change the html content of the element to Start or Pause in the functions so that the function will run alternatively according to the html of the element.
Unless I completely misinterpreted your question this should do it:
$("#pause").click(function() {
$("td").toggle();
if($(this).html() == "Pause")
{
$(this).html("Resume");
pauseTimer();
}else{
$(this).html("Pause");
startTimer();
}
});
Something like this ?
var doStuff = function(callback, text){
callback();
return text;
}
$(this).html($(this).html() == "Pause" ? doStuff(startTimer, "Resume") : doStuff(StartTimer, "Pause"));
var globalTimerPaused = false;
$(document).ready(function() {
$("#pause").click(function() {
$("td").toggle();
$(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
if(!globalTimerPaused){ pauseTimer() } else { startTimer() };
globalTimerPaused = !globalTimerPaused;
});
});
Try this
$('selector').click(function () { // on click event
var song = $('theaudiotag');
if(song.paused) { // if song is paused
$(this).play(); // play it
$(this).html('Pause'); // change text
} else { // otherwise
$(this).pause(); // pause it
$(this).html('Play'); // change text
}
}
This uses jQuery API to check for the current status of the audio tag, and then toggle its state to play or pause and at the same time. It will work cross-browser.
You can use the window method here like:
$("#pause").click(function () {
$("td").toggle();
$(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
window[$(this).html() === "Resume" ? "pauseTimer" : "startTimer"]();
});
You can use the jQuery is visible method:
if ($('td').is(":visible"))
{
pauseTimer();
}
else
{
startTimer()
}
Dan
Another option would be to do the following.
//jQuery 1.8 toggle replacement
$.fn.toggleClick = function(){
var methods = arguments,
count = methods.length;
return this.each(function(i, item){
var index = 0;
$(item).click(function(){
return methods[index++ % count].apply(this,arguments);
});
});
};
function startTime() {
$("td").toggle();
$(this).val("Start");
}
function pauseTime() {
$("td").toggle();
$(this).val("Pause");
}
$("#clickme").toggleClick(startTime,pauseTime);
JSFiddle
$(document).ready(function() {
$("#pause").click(function(pauseTimer(),StartTimer()) {
$("td").toggle();
$(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
});
});