please may I have help fixing my Tampermonkey script?-CodePudding

I wouldn't be surprised if the answer is glaringly obvious, but I have no idea why my userscript isnt working. All CSS classes that are referenced exist in the site it is intended to run on (that works just fine), but I am having problems with running the functions I have inserted into the html.

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.zapsplat.com/*
// @icon         https://www.google.com/s2/favicons?domain=zapsplat.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var btns = document.createElement('nav');
    //
    var link = window.location.href;
    //
    var div = document.createElement('div');
    //
    div.innerHTML = "<script>function bak(){var num = link.match(/\d /);num -= 1;var back = link.replace('/\d /',num);window.location.replace(back);};function fwod(){var num = link.match(/\d /);num  = 1;var fwd = link.replace('/\d /',num);window.location.replace(back);};</script>";
    //
    document.body.prepend(div);
    //
    btns.innerHTML = '<div >::before<ul ><li><a onClick ="bak()">BACK</a></li><li><a onClick = "fwod()">FWD</a></li></ul></div>';
    //
    document.body.prepend(btns);
    //
})();

As per Phuzi's and Ivar's comments, I will point out that the 'problems with running the functions' are reference errors, as the functions are "undefined". It could be a DOM related issue, although I don't understand enough about that to make any judgements.

v2 (change var div to code for improved readability) (only the section I've changed) still doesnt work, but better maybe?

//
    var code = document.createElement('script');
//
    code.innerHTML = "function bak(){var num = link.match(/\d /);num -= 1;var back = link.replace('/\d /',num);window.location.replace(back);};function fwod(){var num = link.match(/\d /);num  = 1;var fwd = link.replace('/\d /',num);window.location.replace(back);};";
//
    document.body.prepend(code);

Error messages in v1

Uncaught ReferenceError: bak is not defined at HTMLAnchorElement.onclick ((index):187)

error messages in v2

VM4624:1 Uncaught ReferenceError: link is not defined at bak (:1:26) at HTMLAnchorElement.onclick ((index):187)

CodePudding user response：

You should really use addEventListener instead of the onclick attribute. This way you don't need to have the JavaScript added to the page you are modifying and can keep it inside your userscript where it's probably easier to debug.

You will also need to move the link variable inside the back and forward functions as you want the current page url - SPAs tend to modify page url without reloading the page and therefore not reloading your userscript (better be safe than sorry.)

(function() {
  'use strict';
  var btns = document.createElement('nav');
  btns.innerHTML = '<div ><ul ><li><a>BACK</a></li><li><a>FWD</a></li></ul></div>';
  document.body.prepend(btns);

  btns.querySelector('ul.uk-pagination li:nth-child(1) a')
      .addEventListener('click', back);

  btns.querySelector('ul.uk-pagination li:nth-child(2) a')
      .addEventListener('click', forward);
})();

function back() {
  var link = window.location.href;
  var num = link.match(/\d /);
  num -= 1;
  var back = link.replace('/\d /', num);
  window.location.replace(back);
}

function forward() {
  var link = window.location.href;
  var num = link.match(/\d /);
  num  = 1;
  var fwd = link.replace('/\d /', num);
  window.location.replace(fwd);
}

That should do it from a JS point of view, but you're likely going to need some additional CSS to make sure your nav is displayed on all pages.

I'm sure there will be other issues with this, and when they arise, do not be tempted to update your question. Instead you should ask another with the specific detail of the issue you are facing.