CODEWITHSUNDEEP
javascriptjqueryarrays
Duplo W
Duplo W

Reputation: 623

How do I call the next and the previous value in an array with a button?

I want the "displayround" div to show a certain value in my array. When the page loads the first value in the array (1/38) is being displayed. When I press the "next" button I want it to show the next value in the array (2/38) and so on. And when I press "previous" button I want it to display the value that comes before the displayed value.

HTML:

<div id="buttonholder">
    <button id="previous">< Previous round</button>
    <button id="next">Next round ></button>
    <button id="current">> Current round <</button>
    <div style="font-size: 0;">
        <form id="inputfield">
            <input type="inputfield" value="Search for round here..."></input>
            <button id="submit">Go</button>
        </form>
    </div>
    <div id="displayround">
    </div>
</div>

My Jquery/javascript:

$(document).ready(function() { 

var round = new Array();
round[0]="1/38";
round[1]="2/38";
round[2]="3/38";
round[3]="4/38";
round[4]="5/38";
round[5]="6/38";
round[6]="7/38";
round[7]="8/38";
round[8]="9/38";
round[9]="10/38";
round[10]="11/38";
round[11]="12/38";
round[12]="13/38";
round[13]="14/38";
round[14]="15/38";
round[15]="16/38";
round[16]="17/38";
round[17]="18/38";
round[18]="19/38";
round[19]="20/38";
round[20]="21/38";
round[21]="22/38";
round[22]="23/38";
round[23]="24/38";
round[24]="25/38";
round[25]="26/38";
round[26]="27/38";
round[27]="28/38";
round[28]="29/38";
round[29]="30/38";
round[30]="31/38";
round[31]="32/38";
round[32]="33/38";
round[33]="34/38";
round[34]="35/38";
round[35]="36/38";
round[36]="37/38";
round[37]="38/38";

$("#buttonholder").find("button").addClass("left")
$("#buttonholder").find("#submit").removeClass("left").addClass("right")
$("#buttonholder").find("#inputfield").addClass("right");

$("#displayround").text(round[0]);

Here is the next button function:

$("#next").click(function() {
    $("#displayround").text()
});

}); //end of document.ready function

Any help appreciated!

Upvotes: 0

Views: 174

Answers (2)

Satpal
Satpal

Reputation: 133423

I will store index in some location, such .data()

Initially

 $("#displayround").text(round[0]).data('index', 0);

In function next function call fetch index and use it

$("#next").click(function() {
    var index = +$("#displayround").data('index');
    $("#displayround").text(round[index + 1]).data('index', index + 1);
});

Similarity, In previous method call

Note: You have take care array length

EDIT

do you have a solution similar to ojovirtual regarding the overflow? When it's at 38/38 I want it to go back to 1/38 and vice versa.

$("#previous").click(function () {
    var index = +$("#displayround").data('index') - 1;
    if (index <= 0) index = round.length - 1;
    $("#displayround").text(round[index]).data('index', index);
});

$("#next").click(function () {
    var index = +$("#displayround").data('index') + 1;
    if (index >= round.length) index = 0;
    $("#displayround").text(round[index]).data('index', index);
});

DEMO

Upvotes: 1

ojovirtual
ojovirtual

Reputation: 3362

You can add a hidden field with the value you are showing and update it every time the user clicks "next" or "previous":

<input type='hidden' name='actualValue' value='0'/>

And then in your javascript:

$("#next").click(function() {
    var actualValue=parseInt($("input[name=actualValue]").val());
    $("#displayround").text(round[actualValue]);
    actualValue++;
    if (actualValue >= round.length) //check for overflow
        actualValue=0;
    $("input[name=actualValue]").val(actualValue);
});

Note that if the user keeps clicking the "Next" button, we set the value to '0', so next to 38/38 it will show 1/38 again. The "previous" click function will be very similar.

Upvotes: 0

Related Questions