javascript - Previous Next in Javascript

Question

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

score 4 · Accepted Answer

The problem is that your getNext and getPrevious functions have a parameter named currentItemIndex, matching the global variable you are trying to use as your maintained index counter. It's an integer, so it's passed by value, not by reference.

Because of this, when you do currentItemIndex++ or currentItemIndex--, you are changing the value of the parameter variable, NOT the global variable.

Change the name of the global variable and the corresponding increment/decrement lines at the end of the functions to match, or the name of the parameter in those two functions and the first line to match.

score 2 · Accepted Answer

The currentItemIndex in functions getPrevious()/getNext() is passed-by-value not by-variable/by-reference. The modifications to currentItemIndex within these functions do not propagate back to the actual parameter that you pass when the function exits.

Typical alternatives involve either:

using the function return to pass back the next or prev index value together with an assignment in the code that calls these functions; OR
creating an object that incorporates the list and a cursor, that records the position of the cursor in its state, which can be modified by methods for prev()/next()

score 2 · Accepted Answer

My version DEMO

Removed onclicks and put them in the head

Change show to do whatever it is you need the function to do

HTML

<button id="previous">Previous</button>
<span id="curidx"></span>
<button id="next">Next</button>

JavaScript

function show() { 
  var item = myItemObjectArray[currentItemIndex];
  document.getElementById("curidx").innerHTML=item.itemId+":"+item.itemName
  document.getElementById("previous").disabled=currentItemIndex<=0;
  document.getElementById("next").disabled=currentItemIndex>=myItemObjectArray.length-1;

}

var myItemObjectArray = new Array();
var currentItemIndex = 5;
window.onload=function() {
  document.getElementById("previous").onclick=function() {
    currentItemIndex--;
    if (currentItemIndex<=0) {
      currentItemIndex=0;
    }
    show();       
  }
  document.getElementById("next").onclick=function() {
    currentItemIndex++;
    if (currentItemIndex>=myItemObjectArray.length-1) {
      currentItemIndex=myItemObjectArray.length-1;
    }
    show();       
  }
  for(i=0;i<10;i++) {
    var ItemCatalog = new Object();
    ItemCatalog.itemId = i;
    ItemCatalog.itemName = "a"+i;
    myItemObjectArray.push(ItemCatalog);
  }
  show();
}

score 1 · Accepted Answer

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>

score 0 · Accepted Answer

Follow this code

changes made 1) onclick="getPrevious()" onclick="getNext()" no need to pass args since they are declared as global. 2) use currentItemIndex++; and currentItemIndex--; directly at the starting of the function. as seen below.

<!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--;
            alert(currentItemIndex);
            alert("PREVIOUS OBJECT" + myItemObjectArray[currentItemIndex].itemId + " " + myItemObjectArray[currentItemIndex].itemName);

            // Modify Current Item Index
        }   

    function getNext()
        {
            currentItemIndex++;
            alert(currentItemIndex);
            alert("NEXT OBJECT" + myItemObjectArray[currentItemIndex].itemId + " " + myItemObjectArray[currentItemIndex].itemName);
            // Modify Current Item Index

        }   
    </script>
</head>

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

score 0 · Accepted Answer

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)
    {
        if(currentItemIndex > myItemObjectArray.length)
                {
                    alert("THERE ARE NO MORE ITEMS TO DISPLAY");
                }
        var localCurrentItemIndex = currentItemIndex-1;
        alert("PREVIOUS OBJECT" + myItemObjectArray[localCurrentItemIndex].itemId + " " + myItemObjectArray[localCurrentItemIndex].itemName);

        // Modify Current Item Index
        modifyCurrentIndex("previous");
    }   

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

    function modifyCurrentIndex(mode)
        {
            if(mode == "next")
                {
                    currentItemIndex = currentItemIndex + 1;
                } else if(mode == "previous")
                    {
                        currentItemIndex = currentItemIndex - 1;
                    }
        }

I used a separate function to modify the global variables. I got the idea from the above solutions too.

Thanks, Ankit.

javascript - Previous Next in Javascript

6 回答 6

Related

Reference