Повесить счётчик на кнопку
и надо на нее повесить счётчик чтоб значение количества нажатий выводил в консоль.
на просторах интернета нашел пример:
описание кнопки заданно как :
li> button class="btn">Button/button> span class="cnt">0/span> /li>
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), но все равно не работает.
прикладываю скрипт который сам передела и прошу указать на ошибки и направить по правильному пути .
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 ); // выводим значение в консоль }; })
Button.onclick — как повесить на кнопку последовательные события?
Привет, есть вот такой код. Тут 5 блоков (стили в отдельном css файле). Задача, поменять цвет.
JavaScript+JQuery! Как повесить функцию обновления страницы на эту же нажатую кнопку, которая имеет другую функцию?
я понимаю что звучит очень странно, НО! по пунктам: 1. есть кнопка С функцией А 2. при нажатии на.
Поставить счетчик, сколько раз нажали на эту кнопку
Я начинающий программист на javascript опыта почти не имею. Создал сайт на html и хочу поставить .
$(document).ready(function() { var $btn = $(".btn"); var $cnt = $(".cnt"); $btn.click(function() { $cnt.html(parseInt($cnt.html()) + 1) }); });
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
html> head> title>title> --> head> body> div>span class="btn">BUTTONspan>div> script type="text/javascript"> "use strict"; var a = 0; // задаем переменную в которой будем вести счёт и которую будем выводить в консоль document.querySelector('div .btn').addEventListener("click", () => { a += 1; // приплюсовываем и присваиваем значение к переменной (а) при нажатии console.log(a); // выводим значение переменной в консоли (а) }); script> body> html> вставил и в расширение и в консоль хрома, в консоли хрома выдал ошибку.
script type="text/javascript"> "use strict"; var a = 0; // задаем переменную в которой будем вести счёт и которую будем выводить в консоль document.querySelector('div .btn').addEventListener("click", () => { a += 1; // приплюсовываем и присваиваем значение к переменной (а) при нажатии console.log(a); // выводим значение переменной в консоли (а) }); script> document.querySelector(‘div .btn’).addEventListener(«click», () => < правильно ли я понимаю эту строчку, в документе ищем значение "кнопка" внутри "div" . и при выполнении действия "click" что то делаем . не очень понятна вот эта вещь. я так понимаю это так кратко функция задается ?
Сообщение от dm_pimkin 
script src="https://code.jquery.com/jquery-3.4.1.min.js">/script>
ага понятно. это внешняя библиотека, но как ее подключить в расширении для браузера я не нашел. поможете ? я просто недавно нчал разбираться во всем этом )
Сообщение было отмечено dm_pimkin как решение
Решение
let controls = document.querySelector('.Controls__content'); // получаем div с классом Controls__content let btn = controls.querySelector('.amber-button'); // получаем кнопку с классом amber-button из div'a, который получили выше let counter =0;// создаём переменную для счётчика btn.addEventListener('click', function(){ // вешаем событие клика на полученную кнопку counter += 1; // при каждом срабатывании события клика к счётчику будет добавляться +1 console.log(counter); // вывод счётчика в консоль });
оооо да, работает с первого раза )спасибо )
а еще такой вопрос тогда, если не сложно ?)
label class="Status__control amber-radio amber-radio_checked"> input class="amber-radio__control" type="radio" name="status"> span class="amber-radio__radio"> /span> span class="amber-radio__text">1/span> /label>
надо узнать какой из них выбран. нашел код на просторах интерента. и надо в отдельнотси считать каждый радиобокс при нажатии на кнопку ( счёт по которой идет. )
нашел код выглядит так:
function fun1() { var rad=document.getElementsByName('r1'); for (var i=0;irad.length; i++) { if (rad[i].checked) { alert('Выбран '+i+' radiobutton'); } } }
в примере на сайте http://w3.org.ua/js/rabota-s-e. tton-v-js/ работает прекрасно а у меня не работает не подскажите в чем проблема ? могу полностью прислать страницу если понадобиься чтоб было полное понимание того что нужно делать.
var rad=document.getElementsByName(‘r1’); — в этой строке ошибка
У твоего input в атрибуте name стоит status
input class="amber-radio__control" type="radio" name="status">
То есть в итоге у тебя должна получиться строчка
var rad=document.getElementsByName('status');
Ну а так, если у тебя несколько чекбоксов с классом amber-radio__control,то я бы лучше заменил на вот эту строчку
var rad =document.querySelectorAll('.amber-radio__control');
var rad =document.querySelectorAll('.amber-radio__control');
а эта строка создает массив и с ним надо работать как с массивом ? то есть поэлементно перебирать и когда статус будет выполнен то это порядковый номер элемента который нам нужен. и тогда возвращаем номер и узнаем который из них был нажат. примерно так да работать должно ?
Да.
Только надо будет создать кнопку и повесить на неё событие клика в котором вызывается эта функция
ага попробую сегодня соединить этих двух бегемотов чтоб все заработало ) спасибо ) если что я аукну ?
Аукай, помогу, чем смогу. Только смотри чтобы твоё обучение не перешло в простой copypaste кода.
На личном опыте случалось уже.
спасибо за помощь ) В итоге получился такой код который работает как надо и как хотелось )
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
// ==UserScript== // @name klicker // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @grant none // @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js // ==/UserScraipt== let Rad = 0; // сообщает какой радиобокс выбран let performed = 0; // счётчик выполненого (порядковый номер 1) let expectation = 0; // счётчик ожидание (порядковый номер 2 ) let counter = 0; // счётчик нажатий // функция фиксирующая нажатие function press ( ){ 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); }); } // узнаем порядковый номер радиобокса и передаем function Radio ( ) { var rad = document.querySelectorAll('.amber-radio__control'); for (var i=0;irad.length; i++) { if (rad[i].checked) { //console.log(" функция Radio:" + i) return i; } } } // вывести в консоль всего нажатий, из них в статусе выполнено / ожидание ( в функцию передается 3 параметра: всего нажатий, в статусе выполнено, в статусе ожидания. function conclusion (counter, performed, expectation ){ console.log("Всего нажатий:" + counter + " Выполнено:" + performed + " Ожидание:" + expectation); }
теперь встала другая задача, при закрытии браузера или страницы, ее перезагрузки или еще каких то факапав счётчик обнуляется. нужно чтоб он не обнулялся, а проверялся. то есть сделал 50 нажатий, закрыт браузер. через 5 мин открыл начал нажимать, а он тебе дальше считает, а не по новой. подскажите про какие функции почитать, чтоб реализовать данную задумку.
думал делать через куки. но может кто то знает более приятное решение. спасибо
Добавлено через 19 минут
или использовать методы window.sessionStorage и window.localStorage ?
итак. есть продвижения по моему скрипту
в итоге получается такой код:
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
// ==UserScript== // @name klicker // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @grant none // @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js // ==/UserScript== press (); // функция фиксирующая нажатие function press ( ){ let counter = 0; // счётчик нажатий let performed = 0; // счётчик выполненого (порядковый номер 1) let expectation = 0; // счётчик ожидание (порядковый номер 2 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;irad.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 ){ localStorage.setItem('counter', counter); localStorage.setItem('performed', performed); localStorage.setItem('expectation', expectation); //console.log("storage - нажатий:" + counter + "выполнено:" + performed + "ожидание" + expectation ); } //функция проверки файла на предыдущие значения function inspection ( ){ let counter = 0; //переменная для хранения переменных let performed = 0; //переменная для записи выполнено let expectation = 0; //переменая для записи в ожидании if(localStorage.getItem(counter)!=0){ counter = localStorage.getItem(counter); //получаем значение в поле нажатия performed = localStorage.getItem(performed); //получаем значение в поле выполнено expectation = localStorage.getItem(expectation); //получаем значение в поле ожидание //console.log("inspection - нажатий:" + counter + "выполнено:" + performed + "ожидание" + expectation); return [counter, performed, expectation]; //возвращаем 3 значения как массив } else { return [0, 0, 0]; //если значение не найдены, то возвращаем 3 нуля тем самым обнуляя счётчики //console.log("выполнена функция inspection, значения не найдены); } }
в нем присутствует функция inspection. хочу делать проверку хранящихся в файле данных. мне с нее надо вернуть 3 значения: return [counter, performed, expectation];, правильно ли я понимаю, что будет возвращен массив с 3 элементами и с ними надо работать как с массивом. то есть, если я захочу сохранить их в другую переменную то надо составлять конструкцию на подобии let a = inspection [0] где будет храниться значение counter и так для 3 значений. ?
спасибо за помощь и наставления. )
и вообще как код выглядит? вроде постарался делать красиво и расписывать каждую функцию, все что можно было вынести в отдельную функцию вынес.