Paginate only value from array javascript

Question

just I did basic pagination now I need to show the pagination number only from an array list that is items_list that can show in a circular manner.

As of now am increasing and decreasing thing number getting it from innerHTML but i need only to circulate it from the array.

var items_list=[1,2,3,4,5,6,7,8,9,10];

function prev(){  
    var elements = document.querySelectorAll("ul.nav > li.myli");

    elements.forEach((item, i) => {
        x = item.innerHTML;
        item.innerHTML = --x;
    })
}

function next(){
    var elements = document.querySelectorAll("ul.nav > li.myli");

    elements.forEach(item => {
        x = item.innerHTML;

        item.innerHTML = ++x;
    })
}

function selectedItem(){
    var elements = document.querySelectorAll("ul.nav > li.myli");
elements.forEach(item => {
    item.addEventListener('click',(e)=>{
        console.log(e.target.textContent);
        let selected = e.target.textContent;
        document.getElementById('selectedText').innerHTML = selected
    }
    )
});
}

<html>
    <head>
        <title>Pagination</title>
        <script src="./index.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <table>
            <tr style="min-height: 34px;">
            <td>
                <button id="leftscroll" class="mybut" onclick="prev()">prev</button>
            </td>
        <td>
            <ul class="nav">
                <li id="a" class="myli" onclick="selectedItem()">1</li>
                <li id="b" class="myli" onclick="selectedItem()">2</li>
                <li id="c" class="myli" onclick="selectedItem()">3</li>
                <li id="d" class="myli" onclick="selectedItem()">4</li>
            </ul>
        </td>
        <td>
            <button id="rightscroll" class="mybut" onclick="next()">next</button>
        </td>
    </tr>
        </table>
        <div id="selectedText" style="display: block;"> -- </div>
    </body>
</html>

namar sood · Accepted Answer · 2020-08-07 16:09:49Z

If it is the circular thing only that you want then you can use the modulo properties like below.

elements.forEach((item, i) => {
       x = item.innerHTML;
       item.innerHTML = (--x + items_list.length) % items_list.length;
    })

elements.forEach(item => {
       x = item.innerHTML;
       item.innerHTML = (++x) % items_list.length;
    })

Updated code to include values from the array

var items_list=[1,2,3,4,5,6,7,8,9,10];

function prev(){  
  var elements = document.querySelectorAll("ul.nav > li.myli");

  elements.forEach((item, i) => {
      let x = item.innerHTML;
      item.innerHTML = items_list[((--x-1 + items_list.length)%items_list.length)];
  })
}

function next(){
  var elements = document.querySelectorAll("ul.nav > li.myli");

  elements.forEach(item => {
      let x = item.innerHTML;
      item.innerHTML = items_list[((++x-1)%items_list.length)];
  })
}

function selectedItem(){
    var elements = document.querySelectorAll("ul.nav > li.myli");
elements.forEach(item => {
    item.addEventListener('click',(e)=>{
        console.log(e.target.textContent);
        let selected = e.target.textContent;
        document.getElementById('selectedText').innerHTML = selected
    }
    )
});
}

<html>
    <head>
        <title>Pagination</title>
        <script src="./index.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <table>
            <tr style="min-height: 34px;">
            <td>
                <button id="leftscroll" class="mybut" onclick="prev()">prev</button>
            </td>
        <td>
            <ul class="nav">
                <li id="a" class="myli" onclick="selectedItem()">1</li>
                <li id="b" class="myli" onclick="selectedItem()">2</li>
                <li id="c" class="myli" onclick="selectedItem()">3</li>
                <li id="d" class="myli" onclick="selectedItem()">4</li>
            </ul>
        </td>
        <td>
            <button id="rightscroll" class="mybut" onclick="next()">next</button>
        </td>
    </tr>
        </table>
        <div id="selectedText" style="display: block;"> -- </div>
    </body>
</html>

its taking only the length of the array but not taking the value from an array

Collectives™ on Stack Overflow

Paginate only value from array javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related