How to limit number of button clicks per day in Javascript? [duplicate] - javascript

This question already has answers here:
How to check whether a Storage item is set?
(17 answers)
Closed 21 days ago.
I want to limit the number of clicks on a button per day to 5 clicks using cookies. So when a user clicks 5 times, the button will no longer be clickable. I managed to do that, but the problem is when I refresh the page, the button is clickable again. So how to apply cookies to remember the user clicks?
My code:
<input type="text" class="form-control" id="prompt" placeholder="Type anything">
<button id="the-button" type="submit">Send</button>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script type="text/javascript">
localStorage.setItem("limit_click",5);
localStorage.setItem("count",1);
$("#the-button").on("click",function(){
var limit = localStorage.getItem("limit_click");
let count = parseInt(localStorage.getItem("count"));
if(count>=limit){
alert('Your free limit counts has expired, please try again tomorrow or consider extending your plan.');
}
else{
localStorage.setItem("count",parseInt(count)+1);
}
});
</script>
I blocked the button when clicked 5 times. But, when page is refreshed, the button is clickable again.
What I want to do:
Block the button after 5 clicks, and then even when the page is refreshed, the button is still blocked.

Your code fails to check the localStorage before setting it to 1. Every page load you do localStorage.setItem("count",1);. This resets the count to 1, so every page load the localStorage is refreshed. This doesn't make sense, so do:
if(!localStorage.getItem("count")){
localStorage.setItem("count",1);
}

Related

javascript / html auto refresh button

I would like to build a webpage button which if clicked reloads the webpage every x seconds (i.e. 5 seconds = 5000 ms). The Problem is that my function gets executed once after 5 seconds, but wont continue to auto refresh after the button was clicked. It always waits for the next button click.
In theory I know that after the click my function has to be called every x seconds, but I simply don't know how to implement this.
This is how far i got:
<html>
<head>
</head>
<body>
<button id = "btn-reload">Automatischer Reload der Seite</button>
<script>
const btnReload = document.getElementById("btn-reload");
btnReload.addEventListener("click", function(){
setInterval(function(){
location.reload()}, 5000);
});
</script>
</body>
</html>
While you refreshing page all state is cleared so also interval not exist. To make it work you need something which will save the state between refresh for example local storage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
You can use URL as your flag if auto refresh is enabled.
Example your-url.com?autorefresh=true
on window load check this flag is set or not to run your auto refresh feature

Javascript code to Click a Button on a Webpage for every 5 Minutes

I have a webpage and it has a Refresh Button. I need to click the button every 5 minutes. The Normal Refresh or Reload or F5 doesn't work in this situation. Is there a way that Javascript can do this task.
Like, I will save the javascript as Bookmark and once I click the bookmark. Then, the javascript event has to click the refresh button every 5 minutes.
I googled it and I found the below code. But, it doesn't work. When I click on it, it just showing a random number in a blank page.
javascript:if(window.autoRefreshInterval) { clearInterval(window.autoRefreshInterval); };
window.autoRefreshInterval = setInterval(function() { jQuery(".refresh").click(); },60000)
thank you in advance,
"I have a webpage and it has a Refresh Button. I need to click the
button every 5 minutes. The Normal Refresh or Reload or F5 doesn't
work in this situation. Is there a way that Javascript can do this
task."
It's not very clear to me, but every time you refresh a webpage, javascript is loaded again. So if you have intervals or variables they are reset at each refresh. If you want to keep some value among refreshs you can store values using localStorage or cookies for example.
If you want refresh automatically page you can use setInterval or metatag "refresh".
"Like, I will save the javascript as Bookmark and once I click the
bookmark. Then, the javascript event has to click the refresh button
every 5 minutes."
Look at this: Add a bookmark that is only javascript, not a URL
you can call your refresh code function or button click event in
setTimeout(yourFucntion(),5000);
else
setTimeout($("#btnName").click(),5000);
Try below code:
<!DOCTYPE html>
<html>
<body onload="f1()">
<script language ="javascript" >
var tmp;
function f1() {
tmp = setInterval(() => f2(), 2000); // replace this with 5 min timer
}
function f2() {
document.getElementById("Button1").click();
}
function f3() {
console.log("Hello World");
}
</script>
<button id="Button1" onclick="f3()">click me</button>
<div id="demo"></div>
</body>
</html>
There are two versions for you to try, one uses javascript to click the button the other automates running the function that they have tied to the button.
Non jQuery:
javascript:(function(){if(window.autoRefreshInterval) {clearInterval(window.autoRefreshInterval);}window.autoRefreshInterval = setInterval(function(){document.getElementsByClassName("refresh")[0].addEventListener('click');},60000);})()
Or with jQuery (OP's comment on original thread):
javascript:(function(){if(window.autoRefreshInterval) {clearInterval(window.autoRefreshInterval);}window.autoRefreshInterval = setInterval(function(){$ctrl.refresh();},60000);})()
Delayed post, but hopefully it helps someone :-).
The trick for me was locating the element by css document.querySelector('.pbi-glyph-refresh').click();
You can combine this with the original code like so, it correctly clicks the PowerBI refresh button on a 60 second timer (the var is in ms).
javascript:if(window.autoRefreshInterval) { clearInterval(window.autoRefreshInterval); };
window.autoRefreshInterval = setInterval(function() {document.querySelector('.pbi-glyph-refresh').click(); },60000)

Timed alert box pop up for website? [duplicate]

This question already has answers here:
JavaScript alert box with timer
(11 answers)
Closed 9 years ago.
For my website I would like an alert box message to appear 4 seconds after the page is opened. I cant figure out how to do this as the timed function works if a button is clicked but I would like the alert box to pop up automatically withoutt any user input/button and then shut when the user clicks "okay"...
Any ideas or posts related to this topic would be great help!
Thanks
<script type = "text/javascript">
window.onload=function(){setTimeout(showPopup,4000)};
function showPopup()
{
//write functionality for the code here
}
</script>
In it's most simple form:
setTimeout(function(){alert("Hello")},4000);
4000 = 4 seconds
If you want an alert to appear after a certain about time use this code:
setTimeout(function() { alert("Your Message"); }, time);

refresh the previous page with history.back [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
History.Back with refresh
I have an input button that I have assigned with onclick="history.back()" .
Is there a way to use this but force the previous page to be refreshed?
I want it to work in FF and IE8
Depending on what exactly you need, here is a fix which needs some more preparation at first, but should work:
Place an invisible element with a (serverside created) timestamp in your document.
Place an eventlistenener which checks the timestamp and reloads the page if it is too old.
Now when you navigate back to this site, either via your button or the browser's back button, the onload handler will fire, check the date and reload the page if necessary.
client side pseudo code:
document.body.addEventListener("load",function(){
// compare timestamp stored in element with current time and if it is too old,
// reload page e.g. via document.location.reload()
var d1 = document.querySelector("#timestamp").innerHTML;
var d2 = Date.now;
if (d2-d1 > 10000 ) document.location.reload();
});

Can i detect/capture the Broswer Back button using javascript? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there a way to catch the back button event in javascript?
In my application,the user can enter data eithe add or modify those modification is saved into database using ajax.After all the modifications is completed in the screen then user will be finalized the data.In the time,user accediently click on Browser 'Back' Button.
So,what i need is,if user clicked without 'Update' button then if clicks the Browser 'Back' button.i want to shown the alert message.So,How to detect/capture the 'Back' Button.Please help me
You could use the window.onbeforeunload event
<body onunload="Unloader()">
<script type="text/javascript">
function Unloader() {
}
</script>

Categories

Resources