Используйте Tampermonkey для вставки флажков, управляющих автонажатием кнопок

Я хочу создать 3 флажка, которые при проверке будут периодически нажимать кнопку (каждую).

Левая и средняя кнопка — это один и тот же корпус, только с разной эстетикой. Нравится:

<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>

Правая кнопка такая:

<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>

Это код для вставки флажков в нужное мне место, которое у меня есть до сих пор:

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])}

У меня уже есть что-то наполовину функциональное, но мне нужно выключать и включать его все время, когда я хочу остановиться.

Я хотел активировать такой код с каждым флажком:

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

Кто-нибудь может мне помочь?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
339
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Итак, вы пытаетесь активировать эти флажки, чтобы запускать эти таймеры, когда они отмечены, и отменять таймеры, когда они не отмечены?

Если так:

  1. Добавьте прослушиватель события change (чтобы работала и клавиатура и мышь).
  2. Сохраните ссылку на таймеры, чтобы их можно было удалить.
  3. Используйте один прослушиватель событий для поддерживаемого кода "DRY". Добавьте атрибут data-, чтобы код знал, какая цель соответствует тому или иному флажку.
  4. Не добавляйте такие узлы!

Этот код работает:
(Совет: после нажатия кнопки запуска фрагмента, но перед установкой флажка нажмите ссылку «Полная страница» справа от указанной кнопки.)

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.info ("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.info (`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>

Это работает отлично, спасибо. Но как оставить флажок установленным после автоматического обновления страницы, и только тот, который отмечен? потому что он останавливает скрипт.

Traifer 05.02.2019 01:48

@Johannesniederauer, это новая/другая проблема. Для этого вам нужно выполнить поиск и/или задать новый вопрос. Но, по сути, вам нужно будет сохранять состояние флажка между перезагрузками с чем-то вроде: sessionStorage, или GM_setValue, или т. д.

Brock Adams 05.02.2019 02:21

Другие вопросы по теме