So I am having this page where I have a main button that takes you to an other page within the website.
So we have "/" and "/game". Once you are in /game there's an other button with id #quest1. Once someone clicks that button, a timer is set for the main button (a.PlayNow) to turn red for 10 minutes.
The problem is my code never changes.
I made this work, but the button doesn't turn back to it's normal form even after 10 minutes have passed. Any help would be appreciated.
Here's the code:
$(function() {
var last = my_getcookie('lastClicked');
var current = Math.round(Date.now() / 1000);
$('#quest1').click(function(){
my_setcookie('lastClicked', current ,1,0);
});
if( last + 600 < current ) {
// 10 minutes over
$('a.PlayNow').attr('href','/game').css({'background':'#a7822f','cursor':'pointer'});
$('a.PlayNow').text('Play Crossroadz!');
} else {
// 10 minutes not over
$('a.PlayNow').removeAttr('href').css({'background':'#b34c4c','cursor':'not-allowed'});
$('a.PlayNow').text('Time not passed!');
}
});
I would solve that by using a timer... Just call buttonPressed()
when someone clicked your button.
var timer;
function buttonPressed()
{
// make button red
timer = setInterval(restoreButton, 1000 * 60 * 10);
}
function restoreButton()
{
// make button normal again
clearInterval(timer);
}