Как изменить глобальную переменную?

Question

[boga-net]

$('.arrow') - класс кнопок. Есть глобальная переменная clickCount . При клике на любую из кнопок, меняется значение clickCount . Нужно сделать счётчик нажатий. После нажатия на кнопки, у неё должно меняться значение, равное кол-ву нажатых кнопок. Эта переменная будет использоваться на протяжении всего кода, в условиях и функциях.

<div class="arrows">
  <div class="arrow arrow-up" id="arrow-up">up</div>
  <div class="arrow arrow-left" id="arrow-left">left</div>
  <div class="arrow arrow-down" id="arrow-down">down</div>
  <div class="arrow arrow-right" id="arrow-right">right</div>
</div>

var clickCount = 0;

$('.arrow').on('click', function() {
	clickCount = clickCounter();
});

function clickCounter() {
	return clickCount += 1;
}

function fuc2() {
	if (clickCount == 2)
		function() {}
}
function fuc2() {
	if (clickCount == 2)
		function() {}
}
function fuc3() {
	if (clickCount == 2)
		function() {}
}

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

Пожалуйста, не предлагайте синтаксис js - только jQuery. Спасибо за понимание и помощь

Comments

[Максим Тимофеев]

Чего Вы решили что дело в области видимости? На мой взгляд там как раз все ок

[Hyubert]

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

$('.arrow').on('click', function() {
  clickCount = clickCounter();
  console.log(clickCount);
});

вывод будет таким

console.log(clickCount);  // 0 первый клик
console.log(clickCount);  // 1 второй клик
console.log(clickCount);  // 2 третий клик

Answer 1

[Максим Тимофеев]

Область видимости не при чем:
https://codepen.io/wokster/pen/NMVLyz
Вы просто вывели данные, когда там был 0. Что бы увидеть изменения их надо вывести после изменений. Вы думаете, что console.log(clickCount); не просто вывел значение переменной, но и будет следить за ее изменением?

Comments

[boga-net]

Запускать console.log внутри функции - я и сам так делал ) Но значение глобальной переменной не меняется

Вот, посмотрите, пожалуйста, что мне нужно - https://jsfiddle.net/zsq2e3e5/10/

Из вашего кода я убрал console.log из функции, и создал условие, в котором используется значение глобальной переменной clickCount

[Максим Тимофеев]

boga-net,

Запускать console.log внутри функции - я и сам так делал ) Но значение глобальной переменной не меняется

Как же не меняется, я Вам даже кодом проилюстрировал

Из вашего кода я убрал console.log из функции, и создал условие, в котором используется значение глобальной переменной clickCount

Вы понимаете что такое события? on('click' - событие, которое влечет выполнение какого-то кода.
А Ваш if (clickCount == 2) { выполнился 1 раз при загрузке страницы. clickCount меняется, а вот код if (clickCount == 2) не выполняется. Что бы он выполнялся, надо вставить его внутрь какого-то события.

[Hyubert]

Максим Тимофеев,

Что бы он выполнялся, надо вставить его внутрь какого-то события.

или запускать по таймеру

[boga-net]

Спасибо всем. Я вечером буду дома, попробую переделать по вашим советам

Answer 2

[ThunderCat]

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

var clickCount = 0;

$('button').on('click', function() {
  clickCount++
  if (clickCount == 2) {
  	console.log('Что-то делать, при определённом количестве нажатий на кнопку')
  }
  $('span').text(clickCount);
});

Comments

[boga-net]

Я виноват, что сразу не описал задачу более подробно. Сейчас подкорретирую вопрос, дабы не вводить людей в заблуждение. Условия должны быть вне функции.

Суть вот в чём :

- глобальная переменная

- кнопка 1
- кнопка 2
- кнопка n

при клике на любую из кнопок меняется "глобальная переменная"

функция 1 ()
условие ()
если "глобальная переменная" == чему-то, то
функция

функция 2 ()
условие ()
если "глобальная переменная" == чему-то, то
функция

функция 3 ()
условие ()
если "глобальная переменная" == чему-то, то
функция

обращение к глобальной переменной на протяжении всего кода

Запихать условия внутрь обработчика события - не проблема )

[ThunderCat]

boga-net, у вас хромает логика, по которой вызываются функции. Функции не срабатывают от того что они просто есть. Все события должны чем-то инициализироваться, то есть должен быть какой-то евент, который запустит функцию 1,2,3 и т.д. Логичнее всего использовать тот же евент что и делает инкремент, как раз там и проверять сколько накапало и вызывать соответствующую функцию.

Answer 3

[Tizi]

Я реализовал это так ))) Клик

Comments

[boga-net]

Не подойдёт ) Чтобы наглядно это увидеть, вот ваш обновлённый фидл

https://jsfiddle.net/zsq2e3e5/2/

[Tizi]

А если вот так ))) Клик

[boga-net]

Tizi, а если вот так ? )) - Клик

Мне нужно использовать значение этой переменной в условиях, чтобы, в зависимости от кол-во нажатий, выполнялись те или иные условия. Грубо говоря - кто-то нажал один раз - что-то поменялось/случилось/сломалось. Нажали 4 раза - запустилась другая функция.

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

[Tizi]

boga-net, Проверяй )) клик

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

[boga-net]

Tizi, жаль.. Я думал, что есть что-то простое и гениальное, чего я не знаю ) Но спасибо за помощь

Answer 4

[Сергей Соколов]

Костыль, комментариями ТС навеяло.
Сделать по таймеру функцию, проверяющую постоянно состояние переменной:

var clickCount = 0;

$('.arrow').on('click', function(){console.log( ++clickCount);});

function update(){
	var previous = clickCount;
  setInterval(function(){
  	if( clickCount === previous) return;
    previous = clickCount;
    if( clickCount === 1) {
      console.log('С почином!');
    } else if( clickCount === 2) {
      console.log('Парочка!');
    } else if( clickCount === 4) {
      console.log('Квадроцикл');
    } else if( clickCount > 5) {
      console.log('Да хватит уже..');
    }
  }, 100);
}

update();

фиддл