Show Next / Previous Array Element

Question

I am writing the first element of an array to the screen and would like to create buttons Next/Previousfor the array, but I cannot get it to work. I tried several methods, but I can not find a suitable solution.

Can anyone help?

This is the last thing I tried:

<div>
<script type="text/javascript"> 
sav = new Array(
"first item",
 "second item",
 "third item", 
 ); 

document.write(sav[0] + " <br>"); 
</script>
</div>

<div>
<a href="" onClick="javascript: sav[i++]">Previous</a>
<a href="" onClick="javascript: sav[i--]">Next!</a>
</div>

Answer 1

Say you have an array var arr = ['foo', 'bar', 'baz'];.
If you want to dynamically select elements from this array, you will need a new variable. Let me name it iand give it a default value.var i = 0;

Still arr[i]; // "foo" (i === 0)

---

Next and previous

, , i. , , i ( ) arr.length.

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

, , , , , i

function prevItem() {
    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 one
    return arr[i]; // give us back the item of where we are now
}

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

, .

---

DOM

, document.write . , id DOM JavaScript .

<div id="output"></div>

<div>
    <span id="prev_button">Previous</span>
    <span id="next_button">Next!</span>
</div>

, <div> JavaScript document.getElementById('output'), <span>.

<div>,

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

<span>, . <div> , .

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

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

! , " ". : <script> , , , ..

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

---

DEMO

---

JavaScript, . - IIFE " " , .

Answer 2

,

<script type="text/javascript"> 

    var sav = [
        "first item",
        "second item",
        "third item", 
    ]; 

    var Current = 0;

    document.getElementById("itmText").innerHTML = sav[Current];

    function Prev(){
        if(Current == 0)
            Current = sav.length - 1;
        else
            Current--;

        document.getElementById("itmText").innerHTML = sav[Current];
    }

    function Next(){
        if(Current == sav.length - 1)
            Current = 0
        else
            Current++;

        document.getElementById("itmText").innerHTML = sav[Current];
    }

</script>

<div id="itmText"></div>

<div>
    <a href="" onClick="javascript: Prev();">Previous</a>
    <a href="" onClick="javascript: Next();">Next!</a>
</div>