How to Make button disabled after 1h and auto re-enable after time is over?

Kronos 0
Viewed 28

I'm trying to get this button to deactivate on click for an 'x' amount of time and auto re-enable after the time is over. Also, even if the page is refreshed this should stay disabled if the time has not expired in the localstorage. This is what i have so far but the button keeps on appearing after i refresh the page even though the time was not over yet. Please help, been trying for some days now trying to solve this problem.

const btns = document.querySelectorAll('.btn');

const getBtnState = function (btns) {
[].forEach.call(btns, function(btn) {
if (window.localStorage.getItem(btn.id) == 'disabled') {
btn.disabled = true
}
})
};
const resetBtnState = function (btns) {
[].forEach.call(btns, function(btn) {
btn.disabled = false
window.localStorage.setItem(btn.id, '')
})
};


var timeout_time = 10;
var time_remaining = 0;

if(localStorage.getItem('timeout_time')==null){
run_timeout(timeout_time);
}
else{
run_timeout(localStorage.getItem('timeout_time'))
}
setInterval(function(){
time_remaining = localStorage.getItem('timeout_time');
if(time_remaining > 1 || time_remaining != null){
localStorage.setItem('timeout_time', time_remaining - 1);
}
}, 1000);

function run_timeout(time){
[].forEach.call(btns, function(btn) {
btn.addEventListener('click', function (e) {
btn.disabled = true
window.localStorage.setItem(btn.id, 'disabled')
alert('Your next vote will be available in 24h');
})
})

}
setTimeout(function(){
localStorage.removeItem('timeout_time');
localStorage.removeItem(btn.id, 'disabled');
}, time * 1000);
localStorage.setItem('timeout_time', time);


getBtnState(btns);




<button class="btn" id="myBtn" onclick="add1()" style="display: visible">Click for 
+1</button>
javascript html
1 Answers

I couldn't test your code locally, so I wrote the following code for you to understand better on how to accomplish this.

Explanation: We want to listen to DOMContentLoaded event and check if our button is currently disabled, if so, we disable the button.

<button class="btn" id="myBtn" >Click for +1</button>


<script lang="js">
    const BUTTON_TO_DISABLE = document.getElementById("myBtn");
    
    /**
     * This is the actual event that will be called when the user clicks on the button
     * @param {Event} e
     */
    const clickEvent = (e) => {
        // Get the id of the button that was clicked, we need this so we can recognize the button
        const buttonId = e.target.id;

        //Set the button to disabled in the local storage
        window.localStorage.setItem(buttonId, 'disabled');

        //Disable the button
        e.target.disabled = true;

        //Notify the user that the button was clicked
        alert('Your next vote will be available in 24h');
    }

    BUTTON_TO_DISABLE.addEventListener("click", clickEvent);

    /**
     * Listen to document load event
     */
    document.addEventListener("DOMContentLoaded", () => {
        //Get the button id
        const buttonId = BUTTON_TO_DISABLE.id;

        //Check if the button is disabled in the local storage
        if (window.localStorage.getItem(buttonId) === 'disabled') {
            //Disable the button
            BUTTON_TO_DISABLE.disabled = true;
        }
    });
</script>
SamHoque0
Related