0

Искал ответ, ни один из похожих вопросов не помог найти решение.
Итак, есть кнопка, прямо в верстке навешен onclick ="showNext()" ,и такая js функция:

function showNext() {
    var step = 1;
    var showBlock = document.getElementById('old-event-hidden-' + step);
    showBlock.style.display = "block";
    function counter() {
        return step++;
    };
    return counter;
};

И вопрос: почему событие onclick первый раз работает, а второй - нет? Надеюсь, как понятно, при нажатии на кнопку - показывает следующий блок по id. Если вдруг это может быть важно - сайт на WordPress, страница создана с помощью плагина visual composer
P.S. Обработчик всё же срабатывает, просто значение переменной step почему-то не увеличивается.

10
  • 1
    сделайте глобальную видимость переменной для step.
    – Alex
    Commented 14 июл. 2017 в 20:36
  • 1
    и зачем такое извращение с counter?
    – Alex
    Commented 14 июл. 2017 в 20:37
  • 1
    @Klimenkomud, вот только ты нигде не используешь функцию counter. Самое простое решение - убрать вообще функцию counter, и строку var step = 1; вынести из функции showNext
    – Grundy
    Commented 14 июл. 2017 в 20:42
  • 1
    это понятно, но это не ответ на вопрос. если только Вам нужно для собственного понимания.
    – Alex
    Commented 14 июл. 2017 в 20:45
  • 1
    глобальная видимость - это когда переменная объявлена вне функции, локальная - когда в функции. ответ на Ваш вопрос "да".
    – Alex
    Commented 14 июл. 2017 в 20:53

3 ответа 3

2

При клике - каждый раз вызывается showNext(), следовательно - каждый раз step инициализируется единицей, поэтому всегда обращение идет только к одному элементу.

Возвращаемая функция counter никем не используется, поэтому ее можно просто убрать.

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

var step = 1;

за пределы функции showNext()

Тогда получится так:

var step = 1;
function showNext() {
    var showBlock = document.getElementById('old-event-hidden-' + step);
    showBlock.style.display = "block";
    step = step + 1; // увеличиваем значение счетчика для следующего вызова
};

Либо можно вынести наружу функцию counter:

var counter = function(){
    var step = 1;
    function counter() {
        return step++;
    };
    return counter;
}

function showNext() {
    var showBlock = document.getElementById('old-event-hidden-' + counter());
    showBlock.style.display = "block";
};

Либо можно навешивать обработчик через js

button.onclick = function showNext() {
    var step = 1;
    function counter() {
        var showBlock = document.getElementById('old-event-hidden-' + step);
        showBlock.style.display = "block";
        step++;
    };
    return counter;
}();

или

button.addEventListener('click',function showNext() {
    var step = 1;
    function counter() {
        var showBlock = document.getElementById('old-event-hidden-' + step);
        showBlock.style.display = "block";
        step++;
    };
    return counter;
}());
1
  • Спасибо большое =) Commented 14 июл. 2017 в 21:07
1

Она срабатывает столько раз, сколько нужно. Просто у тебя в каждом вызове showNext своя переменная step, имеющая значение 1.

2
  • Хорошо, тогда как мне инкрементировать его? В коде вроде как видна попытка этого действия, что я делаю не так? Commented 14 июл. 2017 в 20:18
  • Дополнил вопрос. Commented 14 июл. 2017 в 20:25
0
var showBlock = document.getElementById('old-event-hidden-' + step);

Ищет элемент с классом old-event-hidden-1

 function counter() {
        return step++;
    };
    return counter;

Запускается функция counter() и происходит выход из самой функции showNext() и всё внутри это функции, обнуляется.

2
  • Вы имели ввиду элемент с id? Это ведь вложенная функция, он не может выйти из корневой по первому return Commented 14 июл. 2017 в 20:37
  • в данном коде никакая функция counter не запускается
    – Grundy
    Commented 14 июл. 2017 в 20:39

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.