Show Next/previous Item Of An Array

I'm writing the first item of an array to the screen, and would like to create Next/Previous buttons for array, but I can't get it to work. I have tried several methods, but I can'

Solution 1:

Say you have an Arrayvar arr = ['foo', 'bar', 'baz'];. If you want to dynamically choose items from this Array, you'll need a new variable. Let's call this i and give it a default value var i = 0;

So far, arr[i]; // "foo" (i === 0)

---

Next and Previous

Now, lets write a function to choose the next item by modifying i. We may want to consider what we want to happen when i is bigger than (or equal to) arr.length as well.

function nextItem() {
    i = i + 1; // increase i by one
    i = i % arr.length; // if we've gone too high, start from `0` againreturn arr[i]; // give us back the item of where we are now
}

Next, lets do the reverse, this time we might want to consider what should happen for negative i

functionprevItem() {
    if (i === 0) { // i would become 0
        i = arr.length; // so put it at the other end of the array
    }
    i = i - 1; // decrease by onereturn arr[i]; // give us back the item of where we are now
}

So far,

nextItem(); // "bar" (i === 1)prevItem(); // "foo" (i === 0 as we did `0 + 1 - 1`)// alsoprevItem(); // "baz" (decreased on 0)nextItem(); // "foo" (increased at end of arr)

Great, so we've got the basic algorithms down.

---

Connecting this to the DOM

First thing to note is that document.write is nearly always a bad idea. Instead, why not give our Elements some uniqueid attributes and use DOM methods in JavaScriptafter the Elements exist.

<divid="output"></div><div><spanid="prev_button">Previous</span><spanid="next_button">Next!</span></div>

So now we can access the first <div> in JavaScript as document.getElementById('output'), and the two <span>s similarly.

Now, let's set the initial text in the <div>, this is quite easy

document.getElementById('output').textContent = arr[0]; // initial value// if i is still at it's default value, we could have used i instead of 0

Next, we need to add event listeners to the <span>s so they perform an action. The handler of each will set the text of the <div> in a similar way to above, but using the relevant function from earlier.

document.getElementById('prev_button').addEventListener(
    'click', // we want to listen for a clickfunction (e) { // the e here is the event itselfdocument.getElementById('output').textContent = prevItem();
    }
);

document.getElementById('next_button').addEventListener(
    'click', // we want to listen for a clickfunction (e) { // the e here is the event itselfdocument.getElementById('output').textContent = nextItem();
    }
);

This is great! Now the only thing left to do is make sure it runs "after the Elements exist". There are two ways to do this, either by putting the <script> element after the elements it uses, or by listening for the load event on window, i.e.

window.addEventListener('load', function () {
    // DOM related JavaScript goes here
});

---

DEMO of everything together

---

If you want to do this multiple times or are mixing it with other JavaScript, you may need to consider variable name conflicts. The easiest way to get around this is by using an IIFE to create a "safe place" for your variables, but this answer is already long enough.

Solution 2:

Try this way easier and corrected.

<scripttype="text/javascript">var text = [
        "first item",
        "second item",
        "third item"
    ]; 

    varCurrent = 0;

    document.getElementById("textHere").innerHTML = text[Current];

    functionPrev(){
        if(Current == 0){
            Current = text.length - 1;}
        else{
            Current--;}

        document.getElementById("textHere").innerHTML = text[Current];
    }

    functionNext(){
        if(Current == text.length - 1){
            Current = 0}
        else{
            Current++;}

        document.getElementById("textHere").innerHTML = text[Current];
    }

</script><divid="textHere"></div><div><buttononclick="Next();">Next!</button><buttononclick="Prev();">Previous</button></div>

Solution 3:

Try this way, easier and corrected. -Alfa College Application Developer.

<scripttype="text/javascript">var text = [
        "first item",
        "second item",
        "third item"
    ]; 

    varCurrent = 0;

    document.getElementById("textHere").innerHTML = text[Current];

    functionPrev(){
        if(Current == 0){
            Current = text.length - 1;}
        else{
            Current--;}

        document.getElementById("textHere").innerHTML = text[Current];
    }

    functionNext(){
        if(Current == text.length - 1){
            Current = 0}
        else{
            Current++;}

        document.getElementById("textHere").innerHTML = text[Current];
    }

</script><divid="textHere"></div><div><buttononclick="Next();">Next!</button><buttononclick="Prev();">Previous</button></div>