You are only able to click the button once per day

I am working on a button that contains numeric values and updates a total number displayed on the page when clicked. I would like this button to only be clickable once per day, so that users cannot click it multiple times within a 24 hour period. Below is an example of my HTML code. How can I achieve this functionality?

   <div>Total : <span id="total">0</span></div>
   <input class="add" data-amount="100" type="button" value="Add 100" />


$(document).ready(function() {
$('.add').click(function() {
 $('#total').text(parseInt($('#total').text()) + 
 parseInt($(this).data('amount')));
 });
})

Answer №1

To ensure the functionality persists even after closing the page, server-side JavaScript is necessary. However, in scenarios where the page remains open without any reloads, follow these steps:

var dayClicked = true;

$("#button").click(function() {
    if (dayClicked) {
        alert("Error!");
    }
    else {
        variable += 1;
        dayClicked = false;
    }
    setTimeout(function() {
        dayClicked = true;
    }, 86400000);
});

This script will increment the value of variable, and upon clicking the #button, display an error message for the next day (86400000 seconds).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring HTML Data with Python String Manipulation

My goal is to use Python to dynamically extract data from an HTML page that is constantly changing. I have identified that the specific data I am interested in is located between a tag that resembles 'abcd>' and another tag. For example: abcd& ...

Upon running `npm start`, an unexpected token error arises in the file originating from a local

After developing my first-app with the help of create-react-app, I incorporated some components from Material-UI. Everything was running smoothly when I launched it using npm start. Upon completion, I decided to extract the nice-component into its own fol ...

Tips on how to prevent certain classes from being impacted by a hue-rotate filter applied to all elements on a webpage

I am currently in the process of adding a feature that allows users to choose between a dark or light theme, as well as select a specific theme color for the app. The implementation involves using CSS filters such as invert(1) for the dark theme and hue-ro ...

Sorting arrays in javascript

My JavaScript array is structured like this: var data_tab = [[1,id_1001],[4,id_1004],[3,id_1003],[2,id_1002],[5,id_1005]] I am looking to organize and sort them based on the first value in each pair: 1,id_1001 2,id_1002 3,id_1003 4,id_1004 5,id_1005 ...

"Empty array conundrum in Node.js: A query on asynchronous data

I need assistance with making multiple API calls and adding the results to an array before returning it. The issue I am facing is that the result array is empty, likely due to the async nature of the function. Any help or suggestions would be greatly appre ...

New feature in jQuery inputmask enables placeholder text to be retained

I have integrated the inputmask feature from https://github.com/RobinHerbots/jquery.inputmask in my project, and I am applying the mask to all textboxes with the class "date". However, I am encountering a problem where if the user leaves one or more letter ...

Why do certain servers encounter the "Uncaught SyntaxError: Unexpected token ILLEGAL" error when loading external resources like Google Analytics or fonts from fonts.com?

Working on a variety of servers, I encountered a common issue where some externally loaded resources would throw an error in Chrome: "Uncaught SyntaxError: Unexpected token ILLEGAL". While jQuery from the googleapis CDN loads without any problems, attempt ...

Detecting Scroll on Window for Specific Element using Jquery

I need help troubleshooting my code. I am trying to activate only one item that comes from the bottom of the page, but instead all div elements are getting activated. $(window).scroll(function() { $('.parallax').each(function(e) { if($( ...

When the button is clicked, refresh the row and column that corresponds to the user's

I have developed a checklist system that allows managers to create a list of products, which employees can then sign off on once they have completed them. Each product or material created is assigned a revision number. The layout can be seen below. https: ...

How can I activate a disabled option number 2 after selecting option number 1?

I have encountered an issue with my JavaScript code. The second "select" element is supposed to be disabled by default, but I want it to become enabled when an option is selected from the first "select". However, this functionality is not working as expect ...

Obtain a value from a jQuery POST request

Is it possible to dynamically set the width of a table using a Javascript variable obtained from a jQuery post? $.post("get.php", {this: 'that'}, function(data){ var width = data // for example, '300' ? How can I utilize this variabl ...

Issues with AngularJS Opening the Datepicker upon Click

Currently, I am developing an application using AngularJS, JQuery, and Bootstrap. In this project, I have incorporated a customized date range picker from www.daterangepicker.com. Issue: The problem arises when I attempt to open the date range picker by c ...

Personalizing the arrow positioning of the Angular8 date picker (both top and bottom arrow)

I am interested in enhancing the design of the Angular 8 date picker by adding top and bottom arrows instead of the default left and right arrows. Can someone guide me on how to customize it? Check out the Angular 8 date picker here ...

Looking to Share Your Words on Tumblr?

When it comes to interacting with Tumblr, I have no issues using the GET method. However, as soon as I attempt to use the POST method for my Tumblr blog, an error is thrown: ({"meta":{"status":401,"msg":"Not Authorized"},"response":[]}); Below is the cod ...

Guide to customizing the Autocomplete jQuery plugin to mimic Google's result replacement feature

I have implemented the jQuery plugin Autocomplete like Google for two form fields - foo and bar (which is dependent on the value of foo): $(function() { $("#foo").autocomplete({ minLength: 3, limit: 5, source : [{ u ...

What causes addEventListener to not return a value?

In this snippet of code: let rockClick = rockBtn.addEventListener('click', playRound.bind("rock", computerPlay(), false)); After using console.log(), the output is undefined. The purpose of rockBtn:const rockBtn = document.querySelecto ...

Steps for splitting a numbered list and adding an image above each item:

I have a challenge I'm trying to tackle with my list: My goal is to create a long, numbered list that is divided into different sections I also want to include an image within each list item and have it display above the numbered title of the sectio ...

The sorting of objects by Lodash is not accurate

My aim is to arrange objects based on a specific property (price). var arr = [{ name: 'Apple', price: '1.03' }, { name: 'Cherry', price: '0.33' }, { name: &apo ...

jquery struggles to understand jsonp data during cross-domain heartbeats

I have embedded my module, which is an asp.net project, within a "portal". The portal creates an iframe that points to my URL. I understand that this setup may not be ideal, but it was not something I could control. To prevent the session on the main "po ...

Exploring the differences between JavaScript destructuring and assignment

In my code, I initially used this line: const availableDays = status.availableDays; However, a suggestion was made to replace it with this line: const { availableDays } = status; Both options achieve the same result in one line of code, but I am curious ...