Цикл for не работает в DOM

Как правильно написать цикл for - в этом примере https://jsfiddle.net/dq0y9psj/ ? В итоге при каждом клике по кнопке результат в блоке должен увеличиваться на единицу

В данном случае, думаю, цикл for не нужен. Можно хранить значение счетчика в замыкании. И возвращать из замыкания функцию, которая будет обработчиком клика по кнопке. Например так: https://jsfiddle.net/ogorobets/d2zjh193/5/

1 лайк

Спасибо.
а если добавить еще условие - обратный отсчет уже по другой кнопке https://jsfiddle.net/d2zjh193/7/ - то что-то здесь не срабатывает (назад не считает).
И если туда добавить условие остановки счетчика, когда дойдет до 1 в обратном порядке - break-ом выходить из цикла - https://jsfiddle.net/d2zjh193/8/ - то тогда уже ни одна кнопка не работает

https://jsfiddle.net/d2zjh193/9/
у тебя переменная counter была внутри первого замыкания, второе замыкание ничего не знало о нем. Вынеси переменную на уровень выше. Что бы оба замыкания могли с ним работать. Почитай про область видимости.

спасибо… но как тогда написать условие, чтобы счетчик не отсчитывал от 0 в обратную сторону (чтобы -1, -2, и т.д. не считал, а останавливался на 1). Этот цикл должен бы как то break-ом останавливаться

не нужно никакого цикла или break, просто оберни в условие, если значение меньше 1, то код counter–; пусть не отрабатывает

а это какое условие вместо break?

if (counter < 1) {
то что здесь должно быть вместо break?
}

Оператор break можно использовать только внутри циклов. В данном случае ( https://jsfiddle.net/d2zjh193/8/ ) он использован внутри блока if и вызывает ошибку (Uncaught SyntaxError: Illegal break statement). Ошибку можно увидеть в консоли внутри Chrome Dev Tools (кнопка F12). Если в скрипте на js есть хотя бы одна ошибка, то он вообще не запустится.

1 лайк

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

if (counter > 0) {
  counter--;
}

Т.е. написать условие при котором счетчик будет уменьшаться. А если условие не выполняется, то счетчик не будет меняться.

1 лайк

если усложнить эту задачу - добавить еще и мат. вычисление(умножение полученного результата) - https://jsfiddle.net/uo9pgjL8/1/ - работает, но только в случае увеличение счетчика на единицу.
А если обратно - при уменьшении счетчика - то выдает ошибку, undefined в поле отсчета итераций, и в поле получения результата также не работает (код, который выдает ошибку - закомментирован). Почему так работает? Переменные для получения этих результатов уже вынесены глобально.

Элемент resFour2 был не определен внутри замыкания с обработчиком клика по кнопке Down. Нужно было ее определить. Это собственно и говорилось в тексте ошибки Uncaught ReferenceError: resFour2 is not defined - переменная resFour2 не определена. Там же, в консоли, можно нажать на треугольник слева от текста ошибки открыть список файлов, где возникла ошибка. Там указан файл и строка где возникла ошибка. Потом можно кликнуть по этому файлу в консоли, произойдет переход к строке кода с ошибкой. Это может помочь определить в чем была проблема.
И еще одна ошибка была - resultFour2/4 это все равно что undefined/4, т.к. в начале выполнения скрипта для resultFour2 не было задано значение по умолчанию. Нужно было поменять resultFour/4 на counter/4, если я правильно понял твою задумку:

resultFour2 = counter/4;

Вот мой исправленный вариант этого скрипта:
https://jsfiddle.net/ogorobets/uo9pgjL8/8/#editor-options
А вообще рекомендую использовать отладчик Chrome Dev Tools для поиска ошибок и их устранения. Вот неплохая статья по отладке javascript в Chrome: https://learn.javascript.ru/debugging-chrome

Наверное в строке 30 надо было написать

resultFour2 = counter * 4;

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

Я немного отредактировал код и убрал замыкания. Вот отрефакторинная версия: https://jsfiddle.net/ogorobets/uo9pgjL8/12/

1 лайк