Вынести переменную из функции

Question

Застрял на элементарном, не могу вынести переменную из функции, смысл функции такой, я создаю динамично 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 Извините, если как-то не так что-то вставил и объяснил, поправляйте меня! Всем спасибо

Answer 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>

Answer 2

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

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/

БЛОГ НА HUSL

Вынести переменную из функции

Ответы (2 шт):