Повесить счётчик на кнопку

@dm_pimkin · Регистрация: 29.12.2019

Студворк — интернет-сервис помощи студентам

всем привет. есть кнопка которая описывается как

HTML5
1
2
3
4
5
<div class="FormGroup__content Controls__content">
            <button type="submit" class="amber-button amber-button_theme_accent amber-button_size_m" aria-disabled="false">
            <span class="amber-button__text">Отправить 0 </span>
            </button>
        </div>

и надо на нее повесить счётчик чтоб значение количества нажатий выводил в консоль.

на просторах интернета нашел пример:

описание кнопки заданно как :

HTML5
1
2
3
4
<li>
    <button class="btn">Button</button>
    <span class="cnt">0</span>
  </li>

а сам скрипт задан кодом:

JavaScript
1
2
3
4
5
6
7
document.querySelectorAll('ul .btn')
  .forEach(function(el){ 
    el.onclick = function() {
      let cnt = this.closest('li').querySelector('.cnt');
      cnt.innerText = parseInt(cnt.innerText, 10)+1;
    };
  });

не могу переделать под свои нужды. попробовал вот так вот и выполнить в консоли браузера, но ничего не получается.
пробовал выполнить в расширении Tampermonkey (желательно что работало в Tampermonkey), но все равно не работает.

прикладываю скрипт который сам передела и прошу указать на ошибки и направить по правильному пути .

JavaScript
1
2
3
4
5
6
7
8
9
 var A = 0; // задаем переменную в которой будем вести счёт и которую будем выводить в консоль 
    document.querySelectorAll('div .btn') // я так понимаю ищет все имеет класс btm внутри div
  .forEach(function(el){
    el.onclick = function() { // я так понимаю здесь обработчик события клик при нажатии на кнопку выполняется функция 
      let cnt = this.closest('div').querySelector('amber-button amber-button_theme_accent amber-button_size_m'); // здесь не очень понимаю, но скорее всего здесь ошибка 
      A + 1; // приплюсовываем значение при нажатии 
        console.log( A ); // выводим значение  в консоль 
    };
  })

@Asiman · 08.01.2020, 02:31

JavaScript
1
let counter = GM_getValue('counter') || 0;

И тогда отпадает потребность в этой проверке:

Сообщение от dm_pimkin

if (GM_getValue('counter') != 0 ){
counter = GM_getValue('counter');
performed = GM_getValue('performed');
expectation = GM_getValue('expectation');
};

@dm_pimkin · 09.01.2020, 01:29 **[ТС]**

выполняю данный код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// ==UserScript==
// @name         klicker
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       PIKA
// @match        file:///C:/Users/Pika/Desktop/%D0%BA%D1%80%D1%83%D1%82%D0%B8%D0%BB%D0%BA%D0%B0/index.html
// @grant        GM_getValue
// @grant        GM_setValue
 
// ==/UserScript==
 
 
(function() {
 
press ();
    // Your code here...
})();
 
 
 
 
 
// функция фиксирующая нажатие
function press ( ){
    let counter = GM_getValue("counter") || 0;
    let performed = GM_getValue("performed") || 0;
    let expectation = GM_getValue("expectation") || 0;
    let controls = document.querySelector('.Controls__content'); // получаем div с классом Controls__content
    let btn = controls.querySelector('.amber-button'); // получаем кнопку с классом amber-button из div'a, который получили выше
    btn.addEventListener('click', function(){ // вешаем событие клика на полученную кнопку
        counter += 1;
        if (radio() == 0) {performed += 1};
        if (radio() == 1) {expectation += 1};
        //conclusion(counter, performed, expectation);
        storage(counter, performed, expectation);
    });
}
 
// узнаем порядковый номер радиобокса и передаем
function radio ( ) {
    var rad = document.querySelectorAll('.amber-radio__control');
    for (var i=0;i<rad.length; i++) {
        if (rad[i].checked) {
            //console.log(" функция Radio:" + i)
            return i;
        }
    }
}
 
// вывести в консоль всего нажатий, из них в статусе выполнено / ожидание ( в функцию передается 3 параметра: всего нажатий, в статусе выполнено, в статусе ожидания.
function conclusion (counter, performed, expectation ){
    //console.log("Всего нажатий:" + counter + " Выполнено:" + performed + " Ожидание:" + expectation);
}
 
//функция записи в файл значений, на случай закрытия страницы или браузера
function storage (counter, performed, expectation ){
    GM_setValue("counter", counter);
    GM_setValue("performed", performed);
    GM_setValue("expectation", expectation);
    //console.log("storage - нажатий:" + counter + "выполнено:" + performed + "ожидание" + expectation );
}

делаю пару нажатий на кнопку, потом из консоли браузера пытаюсь получить значения переменных через функцию window.localStorage.getItem("counter"); он выдает null. но при этом при перезагрузке браузера или страницы счёт нажатий в консоль продолжается. мне кажется он пишет в один файл, а через консоль я пытаюсь получить значение по ключу "counter" из другого файла. потому что по другому как объяснить, что при выключении браузера он продолжает счёт а при вызове функции window.localStorage.getItem("counter"); он выдает null я не знаю. если моя мысль правильная, то как проверить из консоли что он правильно все записывает ?

@Asiman · 09.01.2020, 01:46

Вы же используете АПИ GM, при чем тут localStorage?

@dm_pimkin · 09.01.2020, 01:53 **[ТС]**

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

@Asiman · 09.01.2020, 02:08

JavaScript
1
console.log(GM_getValue("counter"))

Или в плагине Tampermonkey в Панели управления заходишь на свой скрипт (где отображается внутренний редактор скрипта) вкладка Хранилище.

@dm_pimkin · 11.01.2020, 04:03 **[ТС]**

появилась новая задача. в скрипте который пишу надо добавить кнопку чтоб по ее нажатию обнулялись все счётчики.
нашел решение и смог создать кнопку по коду "

JavaScript
1
2
3
4
5
6
7
8
9
10
function add_button(){
 
    var btn = document.createElement (('v' == '\v') ? '<input name="myName">' : 'input'); btn.name = 'myName';
    btn.type = 'button';
    btn.id = 'myUniqueID';
    btn.value = 'Очистить! '; //нужно добавить отображение counter на кнопке c динамическим изменением
    btn.style.cssText = 'color: gray; margin-top: 100px; ...';
    document.querySelector('div').appendChild (btn);
 
}

теперь надо отследить нажатие кнопки делаю это по примеру как писали выше, код получился такой:

JavaScript
1
2
3
4
let controls = document.querySelector('.button'); // получаем div с классом Controls__content
    let btn = document.querySelector('.myUniqueID'); // получаем кнопку с классом amber-button из div'a, который получили выше
    btn.addEventListener('click', function(){ // вешаем событие клика на полученную кнопку
        console.log("кнопка 'Очистить!' нажата ");

но не реагирует . мне кажется не правильно определяю атрибуты кнопки чтоб регистрировать ее нажатие.

нашел не очень много информации как создать кнопку и как ее "вписать" в нужный элемент кода. между форм или между кнопок. буду рад если укажите на ошибки.

@Asiman · 11.01.2020, 09:49

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function add_button(){
    var btn = document.createElement (('v' == '\v') ? '<input name="myName">' : 'input');
    btn.name = 'myName';
    btn.type = 'button';
    btn.id = 'myUniqueID';
    btn.value = 'Очистить! '; //нужно добавить отображение counter на кнопке c динамическим изменением
    btn.style.cssText = 'color: gray; margin-top: 100px; ...';
    btn.addEventListener('click', function(){ // вешаем событие клика на полученную кнопку
        GM_setValue("counter", 0);
        console.log("кнопка 'Очистить!' нажата " + GM_getValue("counter"));
    });
    document.querySelector('div').appendChild (btn);
}

Добавлено через 13 минут
Или jquery:

JavaScript
1
// @require      https://code.jquery.com/jquery-3.4.1.min.js

JavaScript
1
2
3
4
5
$("div:eq(0)").append("<input name='myName' type='button' id='myUniqueID' value = 'Очистить!' style='color: gray; margin-top: 100px;'>");
$("#myUniqueID").click(function() {
    GM_setValue("counter", 0);
    console.log("кнопка 'Очистить!' нажата " + GM_getValue("counter"));
});

Добавлено через 5 минут
Так же есть вариант с встраиванием своего кода в страницу, таким образом можно менять функции страницы, например:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
 
<head>
    <title>Test</title>
    <script type="text/javascript">
        function s(a) {
            alert (a);
        }
    </script>
</head>
<body>
    <button id="button" onclick="s(1);">button</button>
</body>
 
</html>

В котором есть функция s() и её, с помощью user.js, можно переписать:

JavaScript
1
2
3
4
5
6
    $("head").append(
        "<script>"
        + "function s(a) {"
            + "alert (2);"
        + "}"
        + "</script>");

Добавлено через 10 минут
Последнее я упомянул как еще один вариант, но он не подходит для GM_getValue/GM_setValue, но подошел бы к localstorage

Типа так:

JavaScript
1
2
3
4
5
6
7
8
$("head").append(
        "<script>"
        + "function f(a) {"
            + "localStorage.setItem('counter', a);"
            + "console.log('кнопка \'Очистить!\' нажата ' + localStorage.getItem('counter'));"
        + "}"
        + "</script>");
$("div:eq(0)").append("<input onclick='f(0)' name='myName' type='button' id='myUniqueID' value = 'Очистить!' style='color: gray; margin-top: 100px;'>");

@dm_pimkin · 12.01.2020, 01:58 **[ТС]**

"запутался" немного в собственном коде.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
// ==UserScript==
// @name         klicker
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       PIKA
// @match        file:///C:/Users/Pika/Desktop/%D0%BA%D1%80%D1%83%D1%82%D0%B8%D0%BB%D0%BA%D0%B0/index.html
// @grant        GM_getValue
// @grant        GM_setValue
 
 
// ==/UserScript==
 
 
(function() {
 
 
    var performed = 0; //статус выполненно
    var expectation = 0; //статус в ожидании
    var send = 0; // статус отправленно
 
    press ();
    clear_button();
 
    // Your code here...
})();
 
 
 
 
 
// функция фиксирующая нажатие
function press ( ){
 
    let counter = 0 ; // счётчик нажатий на кнопку отправить
    let controls = document.querySelector('.Controls__content'); // получаем div с классом Controls__content
    let btn = controls.querySelector('.amber-button'); // получаем кнопку с классом amber-button из div'a, который получили выше
    btn.addEventListener('click', function(){ // вешаем событие клика на полученную кнопку
        //console.log(" нажата кнопка Отправить ");
        score( 0, 1 );
    });
}
 
// узнаем порядковый номер радиобокса и передаем
function radio ( ) {
    var rad = document.querySelectorAll('.amber-radio__control');
    for (var i=0;i<rad.length; i++) {
        if (rad[i].checked) {
            console.log(" функция Radio:" + i)
            return i;
        }
    }
}
 
// вывести в консоль всего нажатий, из них в статусе выполнено / ожидание ( в функцию передается 3 параметра: всего нажатий, в статусе выполнено, в статусе ожидания.
function conclusion (counter, performed, expectation, send ){
    console.log("Всего нажатий:" + counter + " Выполнено:" + performed + " Ожидание:" + expectation + " Отправить:" + send);
}
 
//функция записи в файл значений, на случай закрытия страницы или браузера
function storage ( performed, expectation, send ){
    //GM_setValue("counter", counter);
    GM_setValue("performed", performed);
    GM_setValue("expectation", expectation);
    GM_setValue("send", send);
    console.log("STORAGE - " + " выполнено:" + performed + '\r\n' + " ожидание:" + expectation + '\r\n' + " отправить:" + send );
}
 
 
 
function clear_button(){
    var btn = document.createElement (('v' == '\v') ? '<input name="myName">' : 'input');
    btn.name = 'myName';
    btn.type = 'button';
    btn.id = 'myUniqueID';
    btn.value = 'Очистить! '; //нужно добавить отображение counter на кнопке c динамическим изменением
    btn.style.cssText = 'color: gray; margin-top: 100px; ...';
    btn.addEventListener('click', function(){ // вешаем событие клика на полученную кнопку
        score( 1, 0 );
        //console.log("кнопка 'Очистить!' нажата ");
    });
    document.querySelector('div').appendChild (btn);
}
 
 
// функция счета 
function score(clear, button){
 
 
    if ( button == 1){
        let rad = radio();
        if (rad == 0) {window.performed += 1};
        if (rad == 1) {window.expectation += 1};
        if (rad == 2) {window.send += 1};
        storage(window.performed, window.expectation, window.send);
        console.log(" button == 1 " + " выполнено:" + window.performed + '\r\n' + " ожидание:" + window.expectation + '\r\n' + " отправить:" + window.send );
    }
 
    if ( clear == 1 ){
        storage(0, 0, 0);
        console.log("clear == 1" + " выполнено:" + window.performed + '\r\n' + " ожидание:" + window.expectation + '\r\n' + " отправить:" + window.send );
 
    }
 
}

как он работает в таком виде: при нажатии на кнопку отправить в консоле получаю сообщение : STORAGE -выполнено:undefined ожидание:undefined отправить:undefined, а при нажатии на кнопку очистить получаю сообщение : STORAGE - выполнено:0 ожидание:0 отправить:0 .

уже почти полностью поменял изначальный код, но не понимаю почему не работает как должно.

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

Добавлено через 1 час 1 минуту
переделал код, работает как надо. теперь надо чтоб переменная отображалась на кнопке очистить и динамически менялась при нажатии на кнопку отправить.

такой код

btn.value = 'Очистить! ' + GM_getValue("counter"); отображает только то число которое было при загрузке страницы, а надо чтоб оно менялось. не знаю как это сделать. я так понимаю она не изменяется потому что код, который создает кнопку, вызывается только один раз, когда загружается страница и поэтому изменения не отображаются. над чтоб изменялось. можете направить какие функции почитать и изучить? не надо давать готовое решение. спасибо за понимание, хочу научиться сам. )

@dm_pimkin · 15.01.2020, 05:05 **[ТС]**

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//создание кнопки отчистить и фиксация ее нажатия
function clear_button(){
    var btn = document.createElement (('v' == '\v') ? '<input name="myName">' : 'input');
    btn.name = 'myName';
    btn.type = 'button';
    btn.id = 'myUniqueID';
    btn.value = 'Очистить! ' + GM_getValue("counter");
    btn.style.cssText = 'color: gray; margin-top: 100px; ...';
    btn.addEventListener('click', function(){ // вешаем событие клика на полученную кнопку
        score( 0 );
        //console.log("кнопка 'Очистить!' нажата ");
    });
    document.querySelector('div').appendChild (btn);
}

выдает ошибку что querySelector = null/ при этом сама кнопка, как на локальной странице, не создается. я так понимаю он по какой то причине не создает кнопку, потом пытается к ней обратиться, но т.к. она не создана получает 0.

пробую другие методы создания кнопки. на саму локальную страницу, где тренируюсь, добавил кнопки как на рабочем инструменте. пробую ее дублировать с помощью cloneNode, из примера на https://learn.javascript.ru/modifying-document в консоль вставляю пишет выполнено но не выводит кнопку. в чем может быть проблема и как ее обойти ?

@dm_pimkin · 15.01.2020, 05:06 **[ТС]**

локальная страница в архиве.
пробую создать кнопку серую и вставить ее в начале . не получается

@Asiman · 15.01.2020, 10:13

JavaScript
1
$(".amber-button-group").prepend("<input name='myName' type='button' id='myUniqueID' value = 'Очистить!' style='color: gray; margin-top: 100px;'>");

Добавлено через 2 минуты

JavaScript
1
2
3
$("#myUniqueID").click(function(){
   console.log("#myUniqueID");
})

@dm_pimkin · 30.01.2020, 23:41 **[ТС]**

Asiman, спасибо, та часть кода работает . теперь появилась новая задача. На страницу добавил textarea на страницу. и хочу проверять введен ли в нее текст или нет. попробовал много способов пробовал через такое код :

JavaScript
1
2
   let controls = document.querySelector('amber-input__box');
    let btn = controls.querySelector('amber-input__control');

но не получается. он после первого поиска выдает null. в чем проблема и как работать с textarea. почитал но не очень понял даже примеры из гугла не помогли.

в коде этого элемента есть атрибут name он вроде актуален. можно как нибудь по нему искать? надо просто проверять пустая форма или нет ( ввел ли пользователь что нибудь ) ПАМАГИТЕ )))

Новые блоги и статьи Все статьи Все блоги /
Baragoz - DPS/HPS бот для WoW 3.3.5a, многоязычный AmbA 26.10.2026 Хотите ещё ботов? У меня есть один! А я пока отдохну от него. https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=12062&stc=1&d=1793007952 Инструкция внутри. Сразу отвечу: А в PvP с ним. . .	Особенности gif сгенерированных в Си russiannick 21.10.2026 Рассмотрим генерацию gif файлов, которые в Си имеют свои особенности. Gif представляет собой графический формат популярный в интернете. Посмотрим на палитру. Gif файл сгенерированный в си отличается. . .	FPS контроллер с анимированными Y-Bot и 3D-звуком miniaudio (Box3D, Recast, BehaviorTree.CPP, ozz-animation, ImGui, OpenGL и SDL3) 8Observer8 18.10.2026 Содержание блога \| English Version Полное мультиплатформенное руководство по стартовому проекту с FPS-контроллером игрока, анимированными роботами Y-Bot с 4-слойным блендингом, 3D-физикой Box3D,. . .	Локальный http сервер Argus19 17.10.2026 Локальный http сервер На работе, на двух локальных компьютерах круглосуточно работают программы опроса приборов с записью в книги Excel,которые раз в сутки записываются на сервер компании. Т. к. . . .
Копировать Windows на новый диск на UEFI damix 17.10.2026 https:/ / uriesk. wordpress. com/ 2016/ 11/ 01/ move-window-10-to-ssd-on-a-uefi-dualboot-system-with-basic-linux-tools/ TL DR Вставляем диск, а старый подключаем через переходник, грузимся с лайва. . .	ИИ не может найти нужный язык в списке Supersumestria 05.10.2026 Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .	Новая последняя моя музыка в SUNO zorxor 05.10.2026 Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .	Программный домашний кинотеатр russiannick 27.09.2026 Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .

@Asiman 156 / 119 / 59 Регистрация: 27.04.2013 Сообщений: 351
	09.01.2020, 01:46
	Вы же используете АПИ GM, при чем тут localStorage? 0

@dm_pimkin 0 / 0 / 0 Регистрация: 29.12.2019 Сообщений: 19
	09.01.2020, 01:53 [ТС]
	я пытаюсь из консоли браузера где происходит нажатие на кнопку проверить какие значения хранятся или это можно сделать силами самого скрипта, а т.к. он храниться в расширении то этот путь не верный ? правильно понимаю ? 0