Home/ Questions/Q 9104379
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T01:51:14+00:00

I am trying to implement previous next functionality in Javascript but it only gives

  • 0

I am trying to implement previous next functionality in Javascript but it only gives me the next element.

I have used currentItemIndex as the reverence to start for the buttons. I am starting from 5th Item and on click of next button I am trying to get 6th, 7th 8th and so on. and vice versa for previous button.

<!DOCTYPE html>
<html>
<head>
    <title>Previous Next Functionality</title>
    <script type="text/javascript">

    var myItemObjectArray = new Array();
    var currentItemIndex = 5;

    alert("CURRENT ITEM INDEX " + currentItemIndex);
    for(i=0;i<10;i++)
        {
            var ItemCatalog = new Object();

            ItemCatalog.itemId = i;
            ItemCatalog.itemName = "a"+i;

            myItemObjectArray.push(ItemCatalog);
            /*alert("OBJECT ADDED " + myItemObjectArray.length);*/
        }


    function getPrevious(currentItemIndex, myItemObjectArray)
        {
            var localCurrentItemIndex = currentItemIndex-1;
            alert("PREVIOUS OBJECT" + myItemObjectArray[localCurrentItemIndex].itemId + " " + myItemObjectArray[localCurrentItemIndex].itemName);

            // Modify Current Item Index
            currentItemIndex--;
            alert(currentItemIndex);
        }   

    function getNext(currentItemIndex, myItemObjectArray)
        {
            var localCurrentItemIndex = currentItemIndex+1; 
            alert("NEXT OBJECT" + myItemObjectArray[localCurrentItemIndex].itemId + " " + myItemObjectArray[localCurrentItemIndex].itemName);
            // Modify Current Item Index
            currentItemIndex++;
            alert(currentItemIndex);
        }   
    </script>
</head>

<body>
    <button id="previous" onclick="getPrevious(currentItemIndex, myItemObjectArray)">Previous</button>
    <button id="next" onclick="getNext(currentItemIndex, myItemObjectArray)">Next</button>
</body>
</html>

The same element keeps getting repeated.

Ankit

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    function getNext(currentItemIndex, myItemObjectArray)

    with that function declaration you have a local (parameter) variable currentItemIndex. With the line

    currentItemIndex++;

    you now only modify that local variable, not the global value. Just omit it and it will work.

    Or use this:

    var myItemObjectArray = [];
for (i=0;i<10;i++)
    myItemObjectArray.push( {itemId: i, itemName:"a"+i} );
var currentItemIndex = 5;

function getPrevious() {
    currentItemIndex--; // the global variable
    show(currentItemIndex, myItemObjectArray);
}
function getNext() {
    currentItemIndex++; // the global variable
    show(currentItemIndex, myItemObjectArray);
}

function show(index, arr) {
    alert( arr[index].itemId + " " + arr[index].itemName);
}

    <button id="previous" onclick="getPrevious()">Previous</button>
<button id="next" onclick="getNext()">Next</button>
    • 0