Не могу написать скрипт для подсчета кликов по элементу

@TVPNERO · Регистрация: 29.03.2016

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

Нижеприведенный код просто считает один клик.

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

HTML5
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Подсчет голосов</title>
 
    <style>
       p.voice{cursor: pointer;        background: green}
 
 
    </style>
</head>
<body>
 
<div>
    <p>Ваш голос</p>
    <p id="voice" class="voice">+</p>
</div>
 
 
<div class="result" id="result">
 
    <p>Result</p>
    <p id="count" class="count"> </p>
 
</div>
 
 
</body>
</html>

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
<script>
 
 
 
 
        var v=document.getElementById("voice");
 
          v.onclick=function (){
 
 
              var n=0;
 
          n=+1;
 
 
              console.log(n);
 
           };
 
 
 
 
 
</script>

@evikza · 21.10.2017, 19:32

TVPNERO, сейчас у вас получается, что при каждом клике переменная n переопределяется и становится 0. Её необходимо вынести за пределы функции.

HTML5
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
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>Подсчет голосов</title>
 <style>
  p.voice {
   cursor: pointer;
   background: green;
  }
 </style>
</head>
 
<body>
 <div>
  <p>Ваш голос</p>
  <p id="voice" class="voice">+</p>
 </div>
 <div class="result" id="result">
  <p>Result</p>
  <p id="count" class="count"> </p>
 </div>
</body>
 
</html>

JavaScript
1
2
3
4
5
var v = document.getElementById("voice");
var n = 0;
v.onclick = function() {
    console.log(++n)
};

@TVPNERO · 22.10.2017, 21:50 **[ТС]**

evikza, а как так что пременную n видно вне функции (я просто думал что переменную не видно будет вне функции)?

Добавлено через 1 минуту
Переменные в Javascript бывают глобальными и локальными. Глобальная переменная доступна везде, локальная — только в текущей области видимости.

а уже нашел

Добавлено через 44 минуты
evikza, а если я хочу использовать увеличенну переменную -n++ то как мне ее использовать вне функции?

я пробовал так--перезаписать увеличенную переменную n++ в локальную переменную r а потом ее уже вивести в лог.

но не получилось пишет Uncaught ReferenceError: r is not defined

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        var v=document.getElementById("voice");
        var n=0;
 
 
          v.onclick=function (){
var r=0;
 
          n++;
            
 
 
              r=n;
return r;
           };
 
        console.log(r);

Добавлено через 4 минуты
Как использовать увеличенную переменную -n++ то вне функции

@evikza · 22.10.2017, 22:13

TVPNERO, эм, я вообще не понимаю чего вы хотите добиться в результате. Он не может найти переменную r, т.к её еще нет при загрузки страницы, она будет создана когда вы выполните действие клика на div#voice.
Я же вам предложил рабочий вариант. Или вам нужно при обновлении страницы, чтобы переменная n не теряла своё последнее значение? Тогда необходимо использовать локальное хранилище.

Или посмотрите еще один пример.

@TVPNERO · 22.10.2017, 22:23 **[ТС]**

evikza, например юзер нажал 5 раз на кнопку и нужно значение 5 использовать вне функции например для друйгой операции,то есть мне нужна перменная n ее значение для других операций

Добавлено через 2 минуты
evikza, и в примере я не могу понять как сохраняется значение n если alert(n); в другой функции и ему по идею доступна только обявление вначале var n = 0;

JavaScript
1
2
3
4
5
6
7
8
9
var v = document.getElementById("voice");
var n = 0;
document.getElementById("voice").onclick = function() {
    console.log(++n);
};
 
document.getElementById("result").onclick = function() {
    alert(n);
};

Добавлено через 2 минуты
evikza, для выполнение любой функции в джава скрипте нужно перезагрузить страницу ?

@evikza · 22.10.2017, 22:32

TVPNERO, мы объявили переменную n. Изначально, (при загрузке страницы она была равна 0). Пользователь начал увеличивать значение этой переменной и теперь она уже 5. Дальше вы можете делать с ней всё что угодно.

я хочу использовать увеличенную переменную n++

n++ — это не переменная, это эквивалент записи n = n + 1. (инкремент)

@TVPNERO · 23.10.2017, 16:46 **[ТС]**

evikza, нет

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
  var v=document.getElementById("voice");
    var n=0;
 
    v.onclick=function (){
 
        n++;
      
 
 
    };
 
    console.log(n);

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

@evikza · 23.10.2017, 20:55

TVPNERO, Запустил ваш код, при загрузке страницы в консоли браузера я увидел 0.

Я решил 2 раза кликнуть на div#voice и вывести алертом значение переменной n -> 2.

А уже дальше вы можете как угодно работать с этой переменной. (складывать, умножать, передавать в форме и т.д).

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@evikza 968 / 530 / 244 Регистрация: 20.05.2015 Сообщений: 776
	22.10.2017, 22:13
	TVPNERO, эм, я вообще не понимаю чего вы хотите добиться в результате. Он не может найти переменную `r`, т.к её еще нет при загрузки страницы, она будет создана когда вы выполните действие клика на `div#voice`. Я же вам предложил рабочий вариант. Или вам нужно при обновлении страницы, чтобы переменная `n` не теряла своё последнее значение? Тогда необходимо использовать локальное хранилище. Или посмотрите еще один пример. 1

@evikza 968 / 530 / 244 Регистрация: 20.05.2015 Сообщений: 776
	23.10.2017, 20:55
	TVPNERO, Запустил ваш код, при загрузке страницы в консоли браузера я увидел `0`. Я решил 2 раза кликнуть на div#voice и вывести алертом значение переменной `n` -> `2`. А уже дальше вы можете как угодно работать с этой переменной. (складывать, умножать, передавать в форме и т.д). 0

Не могу написать скрипт для подсчета кликов по элементу

Решение