JavaScript - Move through array with a next and prev button

Question

I want to step through an array with a next and previous button. Each button calls the same function as it is in. I have the following code...

    function displayPic(i) {
        if (i == 0) {
            $('#map_holder').empty();
            $('#map_holder').append(picArray[i] + '<br><input id="next" type="button" value="Next" onclick="displayPic(' + i + 1 + ');" />');

            if (i == picArray.length - 1) {
                $('#map_holder').empty();
                $('#map_holder').append(picArray[i] + '<br><input id="prev" type="button" value="Prev" onclick="displayPic(' + i - 1 + ');" />');
            }
            else {
                $('#map_holder').empty();
                $('#map_holder').append(picArray[i] + '<br><input id="prev" type="button" value="Prev" onclick="displayPic(' + i - 1 + ');" />&nbsp;&nbsp;&nbsp;&nbsp;<input id="next" type="button" value="Next" onclick="displayPic(' + i + 1 + ');" />');
            }
        }
    }

Any help?

Have a look at the generated HTML. It should look something like onclick="displayPic(01)" and onclick="displayPic(12)". Can you guess what you'd have to change? Also, displayPic won't do anything at all if i > 0. — Felix Kling
– Felix Kling, Commented May 8, 2015 at 2:00

renakre · Accepted Answer · 2015-05-08 02:34:48Z

2

I do not recommend adding button each time with the new image displayed, it makes it more complicated. How about using a global variable i and building the form early with <img> and <button id='prev'> and <button id='next'>?

<div id='map_holder'></div>//this will display the image
<button id="prev">Prev</button>
<button id="next">Next</button>

var i = 0;
displayPic(0); //show the first photo initially

$('#prev').click(function(){
    i--;
    displayPic(i);
});

$('#next').click(function(){
    i++;
    displayPic(i);
});

function displayPic(i) {        
    $('#map_holder').empty();
    $('#map_holder').append(picArray[i]);

    if(i == 0) 
        $('#prev').hide();
    else  
        $('#prev').show();     

    if(i == picArray.length-1)
        $('#next').hide();
    else
        $('#next').show();   
}

DEMO: https://jsfiddle.net/f4j884cs/1/

edited May 8, 2015 at 2:34

answered May 8, 2015 at 1:59

renakre

8,3218 gold badges55 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Felix Kling Over a year ago

You might want to explain why their code does not work, so they can learn from their mistakes.

InfoSS Over a year ago

I want to render new images and buttons each time. The first image doesn't have the previous button and the last image doesn't have a next button.

datchung · Accepted Answer · 2015-05-08 02:28:06Z

0

Looking at your code, there is an issue. The outer block checks if (i == 0) then the inner block checks if (i == picArray.length - 1). The inner block condition will never evaluate to true under normal circumstances because the value of i is guaranteed to be 0 due to the outer if (i == 0) condition.

Try this to start:

function displayPic(i) {
    if (i == 0) {
        $('#map_holder').empty();
        $('#map_holder').append(picArray[i] + '<br><input id="next" type="button" value="Next" onclick="displayPic(' + i + 1 + ');" />');
    }
    else if (i == picArray.length - 1) {
        $('#map_holder').empty();
        $('#map_holder').append(picArray[i] + '<br><input id="prev" type="button" value="Prev" onclick="displayPic(' + i - 1 + ');" />');
    }
    else {
        $('#map_holder').empty();
        $('#map_holder').append(picArray[i] + '<br><input id="prev" type="button" value="Prev" onclick="displayPic(' + i - 1 + ');" />&nbsp;&nbsp;&nbsp;&nbsp;<input id="next" type="button" value="Next" onclick="displayPic(' + i + 1 + ');" />');
    }
}

If this still doesn't work, please provide further details.

answered May 8, 2015 at 2:28

datchung

4,7261 gold badge37 silver badges32 bronze badges

1 Comment

InfoSS Over a year ago

Yes I have tried that a couple of times. Provided below is the initializer when a "Display Picture" is clicked. It then generates an image and a next button and calls the displayPic function. $('#map_holder').append(picArray[0] + '<br><input id="next" type="button" value="Next" onclick="displayPic(1);" />');

Collectives™ on Stack Overflow

JavaScript - Move through array with a next and prev button

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related