1

Застрял на элементарном, не могу вынести переменную из функции, смысл функции такой, я создаю динамично pagination, потом я хочу получить переменную pageNum по клику на элемент навигации в которой будет ее innerHTML, переменная pageNum нужна для того чтобы менять url API, в функции по клику все отрабатывает правильно, но переменная нужна глобально.

var paginationList = document.querySelector(".pagination__list");
    var paginationLi = [];
    var pageNum;
    function createPaginationControls(data) {
        var count = data.count;
        var countOfItems = Math.ceil(count / 10);
        for (var i = 1; i <= countOfItems; i++) {
            paginationItem = document.createElement("li");
            paginationItem.className = "pagination__item";
            paginationItem.innerHTML = i;
            paginationList.append(paginationItem);
            paginationLi.push(paginationItem);
        };
        for (var value of paginationLi) {
            value.addEventListener("click", function() {
                pageNum = this.innerHTML;
                console.log(pageNum);
            });
        };
    };

Полностью код можно посмотреть тут: https://github.com/PolyakovDen/StarWars-API Извините, если как-то не так что-то вставил и объяснил, поправляйте меня! Всем спасибо

2 ответа 2

1

var paginationList = document.querySelector(".pagination__list");
    var paginationLi = [];
    var pageNum =1; // по умолчанию значение 1;
    function createPaginationControls(data) {
        var count = data.count;
        var countOfItems = Math.ceil(count / 10);
        for (var i = 1; i <= countOfItems; i++) {
            paginationItem = document.createElement("li");
            paginationItem.className = "pagination__item";
            paginationItem.innerHTML = i;
            paginationList.append(paginationItem);
            paginationLi.push(paginationItem);
        };
        for (var value of paginationLi) {
            value.addEventListener("click", function(e) {
                // 
                pageNum = e.target.innerHTML;
                console.log(pageNum);
            });
        };
    };
    
    //то что далее следует удалить оно нужно только для работоспособности примера
    
    var data = {};
    data.count = 26;
    createPaginationControls(data);
    console.log(pageNum); 
    //1 сейчас значение по умолчанию после клика на элемент списка значение изменяется
<div class="pagination__list"></div>

7
  • я добавил дата, просто для того чтобы пример работал, вы используйте свою переменную конечно
    – IvaMuxa
    3 мая 2020 в 19:01
  • 1
    следует обратить внимание на эту часть кода value.addEventListener("click", function(e) { pageNum = e.target.innerHTML; console.log(pageNum); });
    – IvaMuxa
    3 мая 2020 в 19:04
  • Я понял, но я так и не понял как я получаю глобально переменную pageNum, сама функция createPaginationControls(data) уже определенна в .then 3 мая 2020 в 19:06
  • переменной не присвоено значение до тех пор пока не сработает обработчик событий, в момент клика по элементу ей присваивается значение с номером элемента. Можно ей задать значение по умолчанию при инициализации тогда не будет "undefined"
    – IvaMuxa
    3 мая 2020 в 19:22
  • Если у Вас возможность помочь в файле с кодом, потому что не работает на самом файле. Я уже просто не понимаю почему, могу написать в удобный Вам мессенджер! 3 мая 2020 в 19:47
0

Код у вас будет успешно работать. Если хочется сделать более читаемо, то можно выделить функцию установки значения глобальной переменной и отдельно для проверки функцию получения:

var paginationList = document.querySelector(".pagination__list");
var paginationLi = [];
var pageNum = 0;
function set_page_num(__num) {
    pageNum = __num;
  console.log(pageNum);
}
function createPaginationControls(data) {
  var count = data.length;
  var countOfItems = Math.ceil(count / 10);
  for (var i = 1; i <= countOfItems; i++) {
    paginationItem = document.createElement("li");
    paginationItem.className = "pagination__item";
    paginationItem.innerHTML = i;
    paginationList.append(paginationItem);
    paginationLi.push(paginationItem);
  }
  for (var value of paginationLi) {
    value.addEventListener("click", function() {
        set_page_num(this.innerHTML);
    })
  }
}
function log_page_num() {
    console.log('Global pageNum is ' + pageNum)
}
data=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
createPaginationControls(data)
setInterval(log_page_num, 2000)

html:

<ul class="pagination__list"></ul>

https://jsfiddle.net/VladimirNT1/4a9mwzdn/19/

1
  • не нужно так делать. вместо x=5; вы пишете function setX(value){ x=value; } setX(); просто лишнюю память браузера ненужной функцией засорять
    – IvaMuxa
    3 мая 2020 в 19:27

Ваш ответ

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

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