Меню

Javascript кнопка с счетчиком

jQuery Счётчик кликов

На этой тестовой странице сайта проверяю интересную возможность использования jQuery для подсчёта кликов и, что особенно интересно, по каждой из тестовых кнопок отдельно !

Работу управляющего скрипта и ядра jQuery показываю сразу. Подробности о создании — под рисунками мотоциклов.

Пример работы счётчика

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

А здесь счётчик кликов выводит результат.

Для повторного просмотра работы скрипта счётчика, страницу нужно перезагрузить.

Создание счётчика кликов

Сначала создал в HTML-коде три кнопки с разным текстом, на которых и проверяется работа кода счётчика.

После подключил библиотеку jQuery отдельным файлом, и прописал JavaScript-код внутри кода этой страницы, который и считает сделанные клики.
Prim* Этот, написанный, JavaScript-код в отдельный файл НЕ ВЫРЕЗАТЬ! Перестанет работать!

Настройка размера, жирности и цвета цифр и рамок у полей вывода результатов производится атрибутом «style» в блоке вывода у каждого из тэгов «span» HTML-кода этой страницы.

Если в управляющем коде вместо строки: $(‘.counter’).eq($(this).index()).text($(this).data(‘counter’)); которая прописана сейчас, прописать другую, попроще, то результат кликов будет выводится уже по-другому!

Если, вместо показанной выше строчки кода, написать такую: alert($(this).data(‘counter’)); тогда результат кликов будет выводиться во всплывающем окне. Тоже неплохо!
Однако, пользователю будет не особо ясно, результат кликов по какой именно(?!) кнопке оно показывает.

* Обе строчки скрипта срабатывают ПРАВИЛЬНО! *
Но всё же вариант, использованный в управляющем коде сейчас, гораздо лучше. Понятнее!

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

Использование счётчика

В данном примере созданный счётчик кликов является интересным способом использования jQuery. Кроме того, с его помощью можно проверить работу написанного для него скрипта. Зачем проверять?!

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

Для практического использования счётчика кликов, чтобы получать данные о том, что именно заинтересовало посетителя сайта, сколько раз он кликнул по тому или иному элементу веб-страницы, нужно применять уже более сложную технологию. И подобная технология существует!

Читайте также:  Автоматический счетчик колоний tempo

Это совместное использование двух языков программирования: «PHP и JavaScript» (откроется в новом окне) .

Все права защищены. Copyright © 2009 — Коротеев Владимир.

Источник

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

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

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

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

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

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

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

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

Button.onclick — как повесить на кнопку последовательные события?
Привет, есть вот такой код. Тут 5 блоков (стили в отдельном css файле). Задача, поменять цвет.

JavaScript+JQuery! Как повесить функцию обновления страницы на эту же нажатую кнопку, которая имеет другую функцию?
я понимаю что звучит очень странно, НО! по пунктам: 1. есть кнопка С функцией А 2. при нажатии на.

Поставить счетчик, сколько раз нажали на эту кнопку
Я начинающий программист на javascript опыта почти не имею. Создал сайт на html и хочу поставить .

вставил и в расширение и в консоль хрома, в консоли хрома выдал ошибку.

Решение

оооо да, работает с первого раза )спасибо )

а еще такой вопрос тогда, если не сложно ?)

есть массив радиобоксов :

надо узнать какой из них выбран. нашел код на просторах интерента. и надо в отдельнотси считать каждый радиобокс при нажатии на кнопку ( счёт по которой идет. )
нашел код выглядит так:

Вложения

twist.rar (125.2 Кб, 0 просмотров)

var rad=document.getElementsByName(‘r1’); — в этой строке ошибка

У твоего input в атрибуте name стоит status

А в JS ты пишешь r1.

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

спасибо за помощь ) В итоге получился такой код который работает как надо и как хотелось )

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

Читайте также:  Ремонт электросчетчика меркурий 200

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

Добавлено через 19 минут
или использовать методы window.sessionStorage и window.localStorage ?

итак. есть продвижения по моему скрипту

в итоге получается такой код:

в нем присутствует функция inspection. хочу делать проверку хранящихся в файле данных. мне с нее надо вернуть 3 значения: return [counter, performed, expectation];, правильно ли я понимаю, что будет возвращен массив с 3 элементами и с ними надо работать как с массивом. то есть, если я захочу сохранить их в другую переменную то надо составлять конструкцию на подобии let a = inspection [0] где будет храниться значение counter и так для 3 значений. ?

спасибо за помощь и наставления. )

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

Источник

Кнопка

Рассмотрим пример, как нужно обрабатывать нажатия кнопки в форме с помощью JavaScript.

Создадим простейшую форму.

На данный момент кнопка ничего не делает. Получим доступ к кнопке.

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

Осталось подключить созданную функцию к переменной

При нажатии на кнопку появляется сообщение.

Идём дальше. Мы хотим получить текст, введённый пользователем в текстовом поле. Когда пользователь вводит текст, то у элемента input type=»text» в свойстве value появляется значение, которое и содержит текст пользователя. Таким образом, нам нужно сначала получить доступ к элементу страницы по идентификатору, а затем его свойство.

Теперь выводится сообщение, в котором содержится имя кота. Не помешает небольшая проверка, что текст был введён.

Третий шаг — выводить имена котов на самой странице. Мы уже приготовили список ul, к которому тоже можно получить доступ и добавлять дочерние элементы. Для получения доступа используем знакомый метод getElementById(). Для динамического создания нового элемента используется метод document.createElement(). После создания мы можем настроить элемент, например, прописав текст. Для текста элемента списка будем использовать переменную, которая содержит имя кота. Создав новый элемент, его необходимо добавить к родительскому элементу через appendChild().

Читайте также:  Принтер brother hl 1110 счетчик тонера

Новые способы

В последнее время стали использовать другой код. Например, используют const вместо var, вместо onclickaddEventListener.

Также вместо getElementById() можно использовать querySelector(). А в addEventListener использовать другой формат вызова функции.

Атрибут onclick

Также можно использовать готовый атрибут у кнопки onclick.

Источник



Счётчик кликов для разных блоков через делегирование JS

Есть код который название блока и считает клики по кнопке. Проблема в том что поле с количеством кликов меняется один раз. С 0 до 1 и все. Подскажите в чем проблема

4 ответа 4

var clicks = 0; Здесь вы сбрасываете текущее значение счётчика и начинаете сначала.

Ну и, у каждого счётчика должно быть своё хранилище текущего значения.

Можно выбрать все элементы(querySelectorAll) и навешать отдельный обработчик на каждый.
В качестве хранилища текущего значения счётчика можно использовать само отображаемое значение:

Или с общим для всех обработчиком(по аналогии с вашим):

Все дело в том, что вы не сохраняете состояние. Каждый раз при нажатии на кнопку, у вас обнуляется счетчик и он же повышается на +1. Простой путь это проверить — поставить так var clicks = 0;debugger; и вы увидите, что после нажатия кнопки у вас clicks всегда равен 0.

Решение простое — вам нужно вынести объявление clicks вне функции нажатия. Однако у вас тогда будет один счетчик на все кнопки. Можно сохранить значение clicks для каждой кнопки отдельно в самом html например (не самый лучший вариант).

Посмотрел внимательней и обнаружил кое-что.

1) Смотрим тут по поводу querySelector, а именно на деталь, что он вернет только первый элемент.

2) Во вторых — почему у вас buttons это вдруг оказался

    ?? Это абсолютно неверно т.к. нажимая куда угодно мы получаем вызов функции ( не только на кнопку). Ваша переменная вводит в заблуждение. Если вы хотите обрабатывать кнопки, то повесьте на них класс и ищите с помощью селектора классов .someClass тык.

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

Источник