0

I have been writing a Javascript file that calls a for loop and on each iteration of the loop programmatically creates a new link that gets pushed to the user via browser push notification. These unique links are also appended to the notifications as onclick events. I run the code and try to click on the notifications, however I found that rather than each notification having it's own unique onclick link, all consecutive notifications have taken on the onclick of the most recent notification.

I have included a barebones code here that demonstrates the issue I'm facing: https://jsbin.com/loyeviguqu/1/edit?html,js,output

*edit: sorry I quickly realized I had linked to the wrong jsbin, the correct link is now updated

From the code I have written, you will see that I create 3 links google.com/0, google.com/1, google.com/2 with a for loop. Furthermore in the for loop for each iteration I append the link as a onclick event to the notification. However you will see clicking on any of the 3 notifications will always result in the google.com/2, rather than any of the other two. The text in the notifications however retain their uniqueness.

My current suspicion is the each time I append an onclick to the notification it overwrites the old one, however I'm at a loss at how to fix this.

Any explanation or insight into the issue would be greatly appreciated! Thanks!

Jin
  • 87
  • 1
  • 1
  • 8
  • Please [edit] the question to show the relevant code directly in the question body. Without having seen your code I would guess you have fallen victim to the [infamous loop issue](http://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue). – nnnnnn Aug 22 '16 at 05:37
  • Thant's so strange, I triple checked the link to make sure it was linking to the right code. I have updated the link again. Thanks for telling me. – Jin Aug 22 '16 at 17:59

1 Answers1

0
// request permission on page load
document.addEventListener('DOMContentLoaded', function () {
  if (Notification.permission !== "granted")
    Notification.requestPermission();
});

function notifyMe() {
  if (!Notification) {
    alert('Desktop notifications not available in your browser. Try Chromium.'); 
    return;
  }

  if (Notification.permission !== "granted")
    Notification.requestPermission();
  else {

        var string = "http://google.com/" + 1;
    var notification = new Notification(string, {
      icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
      body: "I should be linking to " + string ,
    });

    notification.onclick = function () {
      window.open(this.title);      
    };

     var string = "http://google.com/" + 2;
    var notification = new Notification(string, {
      icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
      body: "I should be linking to " + string ,
    });

    notification.onclick = function () {
      window.open(this.title);      
    };

     var string = "http://google.com/" + 3;
    var notification = new Notification(string, {
      icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
      body: "I should be linking to " + string ,
    });

    notification.onclick = function () {
      window.open(this.title);      
    };
  }

}
Ray
  • 280
  • 3
  • 4
  • Try using this script You are trying to override the string values.So youa re getting the third link always – Ray Aug 22 '16 at 07:15
  • Thanks for your input, i tried replacing the original "string" values with this.title instead and it seems to have fixed the problem but at the cost of the title always having to be the notification link – Jin Aug 22 '16 at 18:04