I have a stock counter that works fine, but I would like to prevent the countdown from resetting when the page reloads.
<span class="qty" id="qty"></span>
<script>
var qty = 57
var qtyId = document.getElementById("qty");
setQty(qty);
function setQty(qty)
{
qtyId.innerHTML = qty;
if (qty==0) return;
var parts = Math.floor((Math.random() * 3) + 1);
if (parts > qty) parts = qty;
var msec = Math.floor(((Math.random() * 15) + 15)*1000);
qty -= parts;
setTimeout(function() {
setQty(qty);
}, msec)
}
</script>
I've tried this based on other scripts, but it doesn't stop the countdown from resetting on page reload.
var qty = 57
var qtyId = document.getElementById("qty");
setQty(qty);
var saved_countdown = localStorage.getItem('saved_countdown');
if(saved_countdown == null) {
// Set the time we're counting down to using the time allowed
time = new_countdown;
localStorage.setItem('saved_countdown', new_countdown);
} else {
time = saved_countdown;
}
function setQty(qty)
{
qtyId.innerHTML = qty;
if (qty==0) return;
var parts = Math.floor((Math.random() * 3) + 1);
if (parts > qty) parts = qty;
var msec = Math.floor(((Math.random() * 15) + 15)*1000);
qty -= parts;
setTimeout(function() {
setQty(qty);
}, msec)
}
Would anyone here be able to help me out? Thank you!
Your version doesn't work because you're trying to assign a non-existing variable (new_countdown
) to time
. I've refactored your code and fixed the problem:
<span class="qty" id="qty"></span>
<button id="reset">Reset</button>
<script>
const setQty = (qty) => {
qtySpan.innerHTML = qty;
if (qty == 0) return;
let parts = Math.floor((Math.random() * 3) + 1);
if (parts > qty) parts = qty;
const msec = Math.floor(((Math.random() * 15) + 15) * 1000);
qty -= parts;
// Save the updated quantity in localStorage
localStorage.setItem('saved_countdown', qty);
setTimeout(() => setQty(qty), msec);
}
// Get the saved countdown value from localStorage, or use default value of 57 if not found
const defaultQty = localStorage.getItem('saved_countdown') ?? 57;
const qtySpan = document.getElementById('qty');
const resetBtn = document.getElementById('reset');
// Add a click event listener to the reset button
resetBtn.addEventListener('click', () => {
// Remove the saved countdown value from localStorage and refresh the page
localStorage.removeItem('saved_countdown');
location.reload();
});
// Set the initial value of the quantity
setQty(defaultQty);
</script>