Unchecked box

Question

Unchecked box

Is there a way to create a checkbox that triggers a timing event when checked, and then stops the event when unchecked? Currently, it seems like the function continues even after unchecking the box, causing the variable to increment at a faster rate.

Live Example

Check out the JS Code below:

var money = 0;

function moneyMaker(){
    money++;
  document.getElementById('money').innerHTML = money;
}

function doautoMoney(){
    window.setInterval(function(){

        moneyMaker();
        document.form.automoney.click();
        //alert('Auto Saved!');
    }, 1000); 
}

javascript checkbox

Answer 1

Answer №1

To stop the repeated action when a checkbox is unchecked, you can use the clearInterval() method and replace onclick with onchange for checkboxes.

var money = 0;

function moneyMaker() {
  money++;
  document.getElementById('money').innerHTML = money;
}
var int;

function doautoMoney(chk) {
  if (chk)
    // store the interval reference for clearing the interval
    int = window.setInterval(function() {
      moneyMaker();
      //document.form.automoney.click();
      //alert('Auto Saved!');
    }, 1000);
  else
    clearInterval(int)
}

Money: <span id="money">0</span>
<p>
  <button onclick="moneyMaker(1)">Mine Iron!</button>
  <input type="checkbox" name="automoney" onchange="doautoMoney(this.checked);">

Answer 2

To stop the repeated action when a checkbox is unchecked, you can use the clearInterval() method and replace onclick with onchange for checkboxes.

var money = 0;

function moneyMaker() {
  money++;
  document.getElementById('money').innerHTML = money;
}
var int;

function doautoMoney(chk) {
  if (chk)
    // store the interval reference for clearing the interval
    int = window.setInterval(function() {
      moneyMaker();
      //document.form.automoney.click();
      //alert('Auto Saved!');
    }, 1000);
  else
    clearInterval(int)
}

Money: <span id="money">0</span>
<p>
  <button onclick="moneyMaker(1)">Mine Iron!</button>
  <input type="checkbox" name="automoney" onchange="doautoMoney(this.checked);">

Unchecked box

Answer №1

Similar questions

Increase the activity in every inquiry

The form does not seem to be updating or refreshing even after an AJAX submission and validation

Is it possible to use both the filter $select.search and the limitTo $select.infiniteCurrentLimit on a single ui-select field?

Guide on getting a website name from a URL using Javascript

Bootstrap arranges checkboxes into three evenly spaced columns and centers them within a form

If you want to retrieve the calculated value of a div using jQuery

Using jQuery to highlight the navigation menu when a specific div scrolls into view

The process of including or excluding an item in an array

Converting text/plain form data to JSON using Node.js - step by step guide

Can you explain the extent to which JavaScript's setTimeout() and clearTimeout() apply?

Tips for managing array data within cookies, sessions, or local storage using jQuery and ensuring they are stored for a set period of time

ReactJS library encounters "Failed to load PDF file." error intermittently while attempting to view a PDF file

Difficulty in toggling the visibility of the react-date-range picker package when selecting a date

Tips on preventing duplication of APIs when retrieving data using nextjs

JS ddsclick is not a defined function

Limit the width and height of MUI Popper with a maximum setting

Guide to passing the parent state as a prop to a child component and enabling the child to modify the state

Encountered a problem while initiating the HTTP server in a node.js

Looping through an array in Vue using v-for and checking for a specific key-value pair

Executing multiple click events using JavaScript