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

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

2
  • Хорошо, тогда как мне инкрементировать его? В коде вроде как видна попытка этого действия, что я делаю не так? 14 июл 2017 в 20:18
  • Дополнил вопрос. 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 14 июл 2017 в 20:37
  • в данном коде никакая функция counter не запускается
    – Grundy
    14 июл 2017 в 20:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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