Use Tampermonkey to insert checkboxes that control autoclicking of buttons

Question

I want to create 3 checkboxes that when checked will periodically click on a button (each).

The left and middle button are the same case, only with different aesthetics. Like this:

<a id="fightButtonBerserk1" name="defender" value="Berserk" class="button foundation-style smallhelp profileButton fightButton" title="" href="#">
  <i class="icon-friends"></i>Berserk! (5 golpes)</a>

The right button is this:

<a id="fightButtonBerserk2" name="attacker" value="Berserk" class="button foundation-style smallhelp profileButton fightButton" title="" href="#">
  <i class="icon-friends"></i>Berserk! (5 golpes)</a>

This is the code to insert the checkboxes in the location I want, that I have so far:

function addDomElements(){var a=$('<div class="foundation-radius fightContainer foundation-base-font"></div>'),
b=$('<input type="checkbox" class="smallerBox" id="EsquerdaHitBox" name="EsquerdaHitBox" style="margin:1px !important;line-height:10px !important;">'),
c=$('<label class="checkboxlabel" for="EsquerdaHitBox" style="margin-right: 20px;">Hit Left</label>'),
d=$('<input type="checkbox" class="smallerBox" id="MeioHitBox" name="MeioHitBox" style="margin:1px !important;line-height:10px !important;">'),
e=$('<label class="checkboxlabel" for="MeioHitBox" style="margin-right: 20px;">Hit Middle</label>'),
f=$('<input type="checkbox" class="smallerBox" id="DireitaHitkBox" name="DireitaHitkBox" style="margin:1px !important;line-height:10px !important;">'),
g=$('<label class="checkboxlabel" for="DireitaHitkBox" style="margin-right: 20px;">Hit Right</label>');
                      a.append(b),a.append(c),a.append(d),a.append(e),a.append(f),a.append(g),
                          $(a).insertAfter($('[class="foundation-radius fightContainer foundation-base-font"]')[1])}

I already have something that is half functional but I need to turn it off and on all the time when I want to stop.

I wanted to activate this kind of code with each checkbox:

var button=document.getElementById("fightButtonBerserk1");
setInterval(function(){
    button.click();
 }, 30000);
var i = setInterval(function() {
            window.location.reload();
        }, 300000);

Can someone help me?

Brock Adams · Accepted Answer · 2019-02-04T20:29:43.700

So, you are trying to activate those checkboxes to fire those timers when checked and cancel the timers when unchecked?

If so:

Add a listener for the change event (so that both keyboard and mouse work).
Store a reference to the timers so that they can be deleted.
Use one event listener for "DRY" maintainable code. Add a data- attribute so the code knows which target goes with which checkbox.
Don't add nodes like that!

This code works:
(Pro tip: After clicking the run snippet button but before checking a checkbox, hit the "Full page" link to the right of said button.)

function addDomElements () {
    var newNodes = $( `
      <div class="mySpamCntrols foundation-radius fightContainer foundation-base-font">
        <input type="checkbox" class="smallerBox" id="EsquerdaHitBox" data-trgtSelctr="#fightButtonBerserk1">
        <label class="checkboxlabel" for="EsquerdaHitBox">Hit Left</label>
        <input type="checkbox" class="smallerBox" id="MeioHitBox" data-trgtSelctr="#fightButtonBerserk2">
        <label class="checkboxlabel" for="MeioHitBox">Hit Middle</label>
        <input type="checkbox" class="smallerBox" id="DireitaHitkBox" data-trgtSelctr="#fightButtonBerserk3">
        <label class="checkboxlabel" for="DireitaHitkBox">Hit Right</label>
      </div>
    ` );
    //-- Best to add a <style> node, but spam inline styles for now...
    newNodes.find ("input").attr ("style", "margin:1px !important;line-height:10px !important;");
    newNodes.find ("label").attr ("style", "margin-right: 20px;");

    newNodes.insertAfter($('.foundation-radius.fightContainer.foundation-base-font')[1] );

    //-- Activate checkboxes
    $(".mySpamCntrols").on ("change", "input[data-trgtSelctr]", processMyCheckBoxes);
}
addDomElements ();

function processMyCheckBoxes (zEvent) {
    var chkBox = zEvent.target;
    //-- If box is now checked, fire off an immediate click and start the timers
    if (chkBox.checked) {
        clickButtonByjQuerySelector (chkBox.dataset.trgtselctr);
        //chkBox.spamClckTmr   = setInterval (clickButtonByjQuerySelector, 30000, chkBox.dataset.trgtselctr);
        chkBox.spamClckTmr   = setInterval (clickButtonByjQuerySelector, 2222, chkBox.dataset.trgtselctr);
        chkBox.pageReloadTmr = setTimeout  (location.reload.bind (window.location), 300000);
    }
    //-- Else, if box is now not checked, cancel the timers
    else {
        clearInterval (chkBox.spamClckTmr);
        clearTimeout  (chkBox.pageReloadTmr);
    }
}

function clickButtonByjQuerySelector (jQuerySelector) {
    var targetNode = $(jQuerySelector)[0];
    if (targetNode) {
        console.log ("Clicking node: ", jQuerySelector);
        //-- Warning this my not always suffice.  See https://stackoverflow.com/q/15048223
        targetNode.click ();
    }
    else {
        console.warn (`Node [${jQuerySelector}] not found!`);
    }
}

/********************************************************************
******* Everything below this block, including the HTML and   *******
******* CSS blocks, is simulated target page.                 *******
******* It's NOT part of the userscript.                      *******
********************************************************************/
$("button").click (zEvent => {
    console.log (`Button ${zEvent.target.textContent} clicked.`);
} );

.mySpamCntrols {
    margin: 1em;
    border: 1px solid green;
    border-radius: 0.5ex;
    padding: 1ex 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foundation-radius fightContainer foundation-base-font">fight 1
    <button id="fightButtonBerserk1">Berserk 1</button>
    <button id="fightButtonBerserk2">Berserk 2</button>
    <button id="fightButtonBerserk3">Berserk 3</button>
</div>
<div class="foundation-radius fightContainer foundation-base-font">fight 2</div>

This is working perfectly, thank you. But how do I leave the checkbox checked after the automatic updating of the page, and only the one that is checked? because it is stopping the script. — Traifer, Feb 05 '19 at 00:48
@Johannesniederauer, that's a new/different kind of problem. You need to search and/or ask a new question for that. But, essentially, you would need to save the checkbox state between reloads with something like: `sessionStorage`, or `GM_setValue`, or etc. — Brock Adams, Feb 05 '19 at 01:21

Use Tampermonkey to insert checkboxes that control autoclicking of buttons

1 Answers1