how do I modify my JavaScript code to achieve the desired outcome

How can I program a button to disable after being pressed 10 times in less than a minute, but continue counting if not pressed for 1 minute?

function buttonClicked() {
  if (totalCount + accCounter > 9) {
    document.getElementById("btn").disabled = true;
  }
}


document.getElementById('btn').onclick = function() {
  upClickCounter();
  buttonClicked()
}

function upClickCounter() {
  const clickCounter = document.getElementById("clicker");
  const totalClickCounter = document.getElementById('totalCounter');

  accCounter++;
  clickCounter.children[0].innerText = '+' + accCounter;
  totalClickCounter.innerText = totalCount + accCounter;

}

let accCounter = 0;
let totalCount = 0;
<button id="btn">Click me</button>

<div id="clicker">
  <span></span>
</div>
<div id="totalCounter"></div>

Answer №1

setTimeout(countOver, 10000);  //set for a 10-second countdown

function countOver(){
  document.getElementById('btn').disabled=true
}

function buttonClicked() {
  if (totalCount + accCounter > 9) {
    document.getElementById("btn").disabled = true;
  }
}

document.getElementById('btn').onclick = function() {
  upClickCounter();
}

function upClickCounter() {
  const clickCounter = document.getElementById("clicker");
  const totalClickCounter = document.getElementById('totalCounter');

  accCounter++;
  clickCounter.children[0].innerText = '+' + accCounter;
  totalClickCounter.innerText = totalCount + accCounter;

}

let accCounter = 0;
let totalCount = 0;
<button id="btn">Click me</button>

<div id="clicker">
  <span></span>
</div>
<div id="totalCounter"></div>

Answer №2

A setTimeout function is necessary in this case. It requires a callback function and a timer specified in milliseconds. I have made changes to the upClickCounter function by adding a line that disables the button, followed by a setTimeout function that will enable the button again after one minute (60,000 milliseconds).

UPDATE:

I believe I grasp your intention and can't help but wonder why, but this modification should achieve the expected outcome.

let accCounter = 0;
let totalCount = 0;
let lessThanOneMinute = true;

function upClickCounter(event) {
    const clickCounter = document.getElementById("clicker");
    const totalClickCounter = document.getElementById('totalCounter');
    accCounter++;
    clickCounter.children[0].innerText = '+' + accCounter;
    totalClickCounter.innerText = totalCount + accCounter;

    // If the click count reaches or exceeds 10 and the lessThanOneMinute variable is still true, disable the button
    if (accCounter >= 10 && lessThanOneMinute) { event.target.disabled = true; }
}

document.getElementById('btn').onclick = upClickCounter;

setTimeout(() => { lessThanOneMinute = false }, 60000); // the lessThanOneMinute will be set to false after one minute

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

Combining the Powers of Express.js and Kue.js

Currently, I am working on a personal project that involves processing tasks in the background. To achieve this, I need to establish communication between my Express and Kue frameworks. Here is a brief overview of my setup: My Express.js application forks ...

Is your pure function component not receiving or responding to input props correctly?

Here is my code snippet: const actionCreators = { action: AppReducer.actionCreators.action } interface GlobalState { user: Model.User | null; } interface InputState { setStashBarWidth(width: number); stashWidth: number; } const Header = ...

Disabling the camera feed in a React application

Attempting to turn off the webcam using javaScript in React has been a bit challenging. Whenever I shift to a new component or when a component is destroyed, my react component immediately moves to the next page, but the webcam light remains on in the new ...

What is the best way to execute a function individually for every tag within a vue.js application?

I'm currently exploring the world of Vue JS and I thought it would be interesting to experiment with something new. Sometimes looking at the code first makes understanding it much easier than a lengthy explanation. Check out this code snippet on jsFi ...

How can I position a form next to a title when utilizing the Bootstrap Panel feature?

I have experimented with multiple solutions found on various sources, but unfortunately none have been successful. I came close to achieving the desired result, but encountered an issue with the panel's default background color not displaying properly ...

What is the best way to add an element after a specific child element with jquery?

Is there a way to add a paragraph element after a specific div class element? I am looking to include a p element within the second text div class. I attempted a solution, but it is not producing the desired result. The current solution is not effective. ...

Utilizing Laravel to send an ajax request to a controller

I am encountering a strange issue with the response from my ajax request. The controller's method below is supposed to return an ID: <?php namespace App\Http\Controllers; use Illuminate\Http\Request; //use App\Http&bsol ...

What is the best way to rotate a mesh group around the axis of a randomly selected 3D element within the Three.js environment?

I'm currently delving into the intricacies of three.js in order to experiment with a basic mechanism. My end goal is to visualize board tilt (front view) in relation to axle orientation (plan view) for different designs on an XY plot, although that&ap ...

Guide on generating a fresh array of objects that encompass distinct items, alongside their combined prices and quantities using JavaScript

I am struggling to generate a new array of objects from one that contains duplicates. For instance, here is the console.log output of the current array: console.log(items); [{ _id: 5eb2f7efb5b8fa62bcd7db94, workName: 'best item ever', ...

Issues with loading content in jQuery's ajax() function

Having an issue with the ajax() function in jQuery. It seems like a simple problem, but I'm struggling to figure it out. My goal is to load content from another HTML file using ajax and here's the code I have so far: $(function(){ $('.submi ...

grab the destination URL from the embedded frame

Thank you for your attention. I am working with three iframes spread across different HTML documents. Here is how they are organized: In the file iframemain.html, there is: <iframe src="iframeparent.html" width="100%" height="600"> </iframe> ...

Retrieving data from a remote source repeatedly based on user selections on a single page

In my current project, I am utilizing next js to build a web application. One of the pages in this app has the following structure: <page> <component_1> This component fetches data from a remote server using `getInitialProps` (alternat ...

Webpack loaders or plugins: understanding the distinction

Can you explain the distinction between loaders and plugins in webpack? I found on the documentation for plugins that it states: Plugins are used to incorporate extra functionalities usually related to bundles within webpack. While I understand that b ...

Steps for displaying the dropdown menu

I am having trouble with displaying the dropdown menu when hovering over the class (dropbtn). I tried adding .dropdown:hover .dropdown-content-strategy{..} but it's not working as expected. If I do manage to show the dropdown menu, it stays visible ev ...

Combining TypeScript into HTML resulted in an error: Uncaught ReferenceError clickbutton is not defined

Attempting to create a basic CRUD frontend without the use of any frameworks. I am encountering an issue when trying to include a TypeScript file (index.ts) in my index.html, as the functions called within it are showing as undefined. I understand that bro ...

Tips for inhibiting default behavior in a modal login form

I am currently working on integrating a login form using the Spring Framework MVC, but I am relatively new to ajax development. Below is a snippet of my index.jsp code: <!-- The Modal --> <div id="modal1" class="modal2"> <span onclick= ...

Steps to create an instance method that only accepts the name of another instance method

I am looking to enhance an object by adding a method that specifically accepts the name of another method within the object. How can I achieve this in a way that dynamically narrows down the accepted names of methods, without hardcoding them? Let's t ...

Modify form layout upon selection of a specific radio button

Hey there! I'm a student currently diving into the world of JavaScript, CSS, and HTML. However, I've encountered a little problem while working on an exercise that involves using Bootstrap. function ShowForm(formId){ document.getElementByI ...

Leveraging the package.json file to execute a separate script within the package.json file

Within my project's package.json file, I have a script called npm run script1. Additionally, my project includes a private npm package as a dependency, which contains its own set of scripts in its package.json file, including one named script2. My goa ...

Having trouble getting the image to stack in the center above the text on mobile devices

When viewing the website on a desktop, everything appears correctly. However, there seems to be an issue with responsiveness on mobile and tablet devices. Specifically, I want to ensure that the image of team members stacks above their respective bio parag ...