How do I modify an existing button's onclick to open a new tab using Greasemonkey?

Question

I have a bunch of buttons on a page that I want to cause to open in a new tab because I'm on dialup and I hate having to hit the back button and wait for the page to load again before I can click the next button.

The button code looks like this:

<button onclick="window.location.href='?act=stock&amp;i=273';return false;" class="wide">Stock in Shop</button>

<button onclick="window.location.href='?act=stock&amp;i=287';return false;" class="wide">Stock in Shop</button>

<button onclick="window.location.href='?act=stock&amp;i=193';return false;" class="wide">Stock in Shop</button>

I think I somehow need to change window.location.href to window.open() and the URL to start with http://www.felisfire.com/possessions? then add the href part from the original onclick... but I have no idea how to go about this and searching 3 hours for answers hasn't helped...

Please! How would I change those buttons with Greasemonkey?

Possible code so far, but I don't think it works:

var buttons = document.getElementsByClassName('wide');
for (var i = 0; i < buttons.length; i++) {
  buttons[i]=button.onclick="window.open('http://www.felisfire.com/possessions + *how do I get the part I need from the original onclick?*');">Stock in Shop</button>

}

Brock Adams · Accepted Answer · 2013-09-12T14:33:07.297

Be careful when working with onclick from a userscript; see the Greasemonkey pitfalls.

Use jQuery or querySelectorAll to get the buttons and then use jQuery or addEventListener to set your new click handler.

The following extracts the key bit from the old onclick, stores it in a data attribute and replaces the onclick with a web 2.0 handler:

var stockBtns   = document.querySelectorAll ("button.wide[onclick*='window']");

for (var J = stockBtns.length - 1;  J >= 0;  --J) {
    var oldClick    = stockBtns[J].getAttribute ("onclick");
    var payloadMtch = oldClick.match (/(act=.+?)';return/);
    if (payloadMtch  &&  payloadMtch.length > 1) {
        var payload = payloadMtch[1];
        //-- Don't use onclick!
        stockBtns[J].removeAttribute ("onclick");
        //-- Store payload value.
        stockBtns[J].setAttribute ("data-destQry", payload);

        //-- Activate click the proper way, especially for userscripts
        stockBtns[J].addEventListener ("click", openNewTab, false);
    }
}

function openNewTab (zEvent) {
    var baseURL     = "http://www.felisfire.com/possessions"
    /* Or be smart and use:
    var baseURL     = location.protocol + "//"
                    + location.host
                    + location.pathname
                    ;
    */
    window.open (baseURL + "?" + zEvent.target.getAttribute ("data-destQry") );
    return false;
}

I had to take the '?' off the base url because the address was ending up with double '?', but otherwise it works great! THANKS! — Kat Cox, Sep 12 '13 at 13:52
(I know I should probably start a new question, but seems a waste) How would I make the button text change when clicked while using this script? I tried adding `button.wide.innerHTML="Clicked!";` right before `return false;` but it didn't work — Kat Cox, Sep 12 '13 at 16:38
Something like `zEvent.target.textContent=="Clicked!"` should work. Put it before the `window.open()`. — Brock Adams, Sep 12 '13 at 17:02
I had to take out one of the '=' and then it worked... thank you!!! Now after I get some sleep I've gotta take this script apart and try to figure out how it works (plus I want to grab the item name off the page and try to at least show it on the window title or something as the stock page doesn't tell you which item you selected - so definitely need to understand how it works lol) — Kat Cox, Sep 12 '13 at 19:01

Roy Dictus · Answer 2 · 2013-09-12T10:59:00.577

0

You can just do this:

<button onClick="window.open('*my-url*');">Stock in Shop</button>

There is no way to force a new tab -- the browser will respect the user's setting whether to create a new tab or a new window.

I've created a JavaScript fiddle for you so that you can see for yourself how simple this is:

http://jsfiddle.net/Fnz9R/

Good luck!

edited Sep 12 '13 at 10:59

answered Sep 12 '13 at 10:53

Roy Dictus

32,551
8
60
76

I know... and my browser is set to open in new tab... anyways, that probably would work, but I can't figure out how to grab the `?act=stock&i=273` part of the original click event... like I said - I feel like an idiot lol – Kat Cox Sep 12 '13 at 10:59
@KatCox, I don't understand what you mean by your question in the comment above... Can you please elaborate? – Roy Dictus Sep 12 '13 at 11:00
and HOW do I change the code on the page... would I search by class name 'wide'? – Kat Cox Sep 12 '13 at 11:01
for each button the `?act=stock&i=273` contains a different number... so I have to be able to keep that part of the code – Kat Cox Sep 12 '13 at 11:02

How do I modify an existing button's onclick to open a new tab using Greasemonkey?

2 Answers2