The setInterval function will run just one time when triggered by an onclick event

Question

The setInterval function will run just one time when triggered by an onclick event

After watching a YouTube tutorial on creating desktop notifications, I had an idea to use it as a reminder tool. For example, having a specific reminder appear as a desktop notification every 30 minutes when triggered by clicking a button. However, the code below only runs the setinterval method once when combined with the click event and fails to repeat. Any thoughts on how to fix this?

Here is a portion of the code in question:

<a href="#" id="trigger" onclick="notifyme()">Trigger</a>

    <script type="text/javascript">

        var myVar;          
        function showalert(){
                var notify;
                notify = new Notification('Reminder!',{
                        body:'How are you?'
                    });
                    window.location = '?message=' + this.tag;
                }

    function notifyme() {
      myVar = setInterval(showalert, 5000);
}

javascript notifications onclick setinterval

Answer 1

Answer №1

When using the line

window.location = '?message=' + this.tag;

, the interval only works once because it requires clicking the anchor to start again once the page reloads.

<a href="#" id="trigger" onclick="notifyme()">Trigger</a>

<script type="text/javascript">
  var myVar;

  function showalert() {
    var notify;
    notify = new Notification('Reminder!', {
      body: 'How are you?'
    });

  }

  function notifyme() {
    myVar = setInterval(showalert, 5000);
}

It is important to note that permission is usually required to display notifications.

function showalert() {
  var notify;
  notify = new Notification('Reminder!', {
    body: 'How are you?'
  });
}

function notifyme() {
  if (Notification.permission === "granted") {
    var myVar = setInterval(showalert, 1000);
  } else {
    Notification.requestPermission(function(permission) {
      if (permission === "granted") {
        var myVar = setInterval(showalert, 1000);
      }
    });
  }
}

<a href="#" id="trigger" onclick="notifyme()">Trigger</a>

Answer 2

When using the line

window.location = '?message=' + this.tag;

, the interval only works once because it requires clicking the anchor to start again once the page reloads.

<a href="#" id="trigger" onclick="notifyme()">Trigger</a>

<script type="text/javascript">
  var myVar;

  function showalert() {
    var notify;
    notify = new Notification('Reminder!', {
      body: 'How are you?'
    });

  }

  function notifyme() {
    myVar = setInterval(showalert, 5000);
}

It is important to note that permission is usually required to display notifications.

function showalert() {
  var notify;
  notify = new Notification('Reminder!', {
    body: 'How are you?'
  });
}

function notifyme() {
  if (Notification.permission === "granted") {
    var myVar = setInterval(showalert, 1000);
  } else {
    Notification.requestPermission(function(permission) {
      if (permission === "granted") {
        var myVar = setInterval(showalert, 1000);
      }
    });
  }
}

<a href="#" id="trigger" onclick="notifyme()">Trigger</a>

The setInterval function will run just one time when triggered by an onclick event

Answer №1

Similar questions

Issues with reading response headers in AngularJS when using Apiary.IO?

How can we eliminate all elements from jQuery except for the first and second elements?

Instead of leaving an Enum value as undefined, using a NONE value provides a more explicit

Utilizing Vue.js to connect with a Node.js server

Obtain the JSON response from the servlet

Code is not running in ReactJS

implement a new directive in AngularJS that references another directive in HTML

When defining a stripe in TypeScript using process.env.STRIPE_SECRET_KEY, an error of "string | undefined" is encountered

Is there a performance benefit to using node.js over client-side JavaScript in comparison to Chrome/V8?

Protractor: What is the best way to retrieve the baseUrl from the command line input?

Problem with Azure Table JavaScript Solution

What is the best way to transform an array of objects into a nested array through shuffling

Struggling with a character entity in Javascript? Learn how to escape it and avoid any display issues (such as showing

Multiple occurrences of setting the state on an array result in logging an empty array each

Having difficulty ensuring DayJs is accessible for all Cypress tests

Bidirectional Data Binding Using Meteor and React

Having trouble retrieving the data associated with a specific ID from my datatable

Unit test produced an unforeseen outcome when executing the function with the setTimeout() method

What is the best way to modify the ID of a duplicated element?

Exploring Nested Divs with Vue Test Utils