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

Manipulating Arrays in JavaScript: Techniques for Extracting Values Buried in Nested Objects

Animation event in CSS3 fails to trigger on Firefox browser

Trouble arises when trying to insert a script tag into a live code editor using HTML

Guide on transforming Json information into the preferred layout and iterating through the loop

Updating the state after receiving API results asynchronously following a function call

Storing the values of a React JS application in local storage using

Having trouble locating the objects in the parent scope of an Angular directive

Deactivating the ajax function is one of the key features of the Framework

Creating Layouts with Bootstrap 3

What steps can I take to resolve the issue of the "self signed certificate in certificate chain" error while trying to install plugins on VS Code?

Using Python, Scrapy, and Selenium to extract dynamically generated content from websites utilizing JavaScript

Programmatically link an Angular JS model to a template using binding

What is the best way to combine 2 javascript objects to create a JSON structure without any nested levels?

Issue: mongoose.model is not a valid function

Ways to retrieve the text of the chosen radio button label with the help of jQuery

Is the `document.documentElement` consistently defined and always representing the HTML element?

What's preventing my Angular list from appearing?

Schema-specific conditions for JSON data

The next-routes server.js encounters an issue: TypeError - the getRequestHandler function is not defined within the routes

Implement scroll bar functionality on canvas following the initial loading phase