Paginate HTML textarea content from a text array in a loop

Question

I need to paginate an array using previous and next or by specifying the position, onchange of the index the value associated with the corresponding must be displayed.

I have tried with the below code, however i fail to achive

I need to paginate an array using previous and next or by specifying the position, onchange of the index the value associated with the corresponding must be displayed.

I have tried with the below code, however i fail to achive

 var resultBox = $('#result') var messages = ["cat", "dog", "fish"]; var idx = $("#pageNumber").val(); var length = messages.length; var getNextIdx = (idx = -1, length, direction) => { switch (direction) { case '1': { $("#pageNumber").val((idx + 1) % length + 1) return (idx + 1) % length; } case '-1': { $("#pageNumber").val(((idx == 0) && length - 1 || idx - 1) + 1); return (idx == 0) && length - 1 || idx - 1; } default: { return idx; } } } var getNewIndexAndRender = function(direction) { idx = getNextIdx(idx, length, direction); console.log(idx) $("#result").val(messages[idx]) } $(document).ready(function() { $("#pageNumber").change(function() { getNewIndexAndRender() }); }); getNewIndexAndRender() $( "#prev" ).trigger( "click" );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="result"></textarea> <input type="text" id="pageNumber" value="0"></input> <button id="prev" onclick="getNewIndexAndRender('-1')">prev</button> <button id="next" onclick="getNewIndexAndRender('1')">next</button>

Answer 1

In your change function, you need to reassign idx with the current input value - 1 .

$("#pageNumber").change(function() {
  idx = $(this).val() - 1;
  getNewIndexAndRender();
});

Demo:

 var resultBox = $('#result') var messages = ["cat", "dog", "fish"]; var idx = $("#pageNumber").val(); var length = messages.length; var getNextIdx = (idx = -1, length, direction) => { switch (direction) { case '1': { $("#pageNumber").val((idx + 1) % length + 1) return (idx + 1) % length; } case '-1': { $("#pageNumber").val(((idx == 0) && length - 1 || idx - 1) + 1); return (idx == 0) && length - 1 || idx - 1; } default: { return idx; } } } var getNewIndexAndRender = function(direction) { idx = getNextIdx(idx, length, direction); $("#result").val(messages[idx]); } $(document).ready(function() { $("#pageNumber").change(function() { idx = $(this).val() - 1; getNewIndexAndRender(); }); }); getNewIndexAndRender() $("#prev").trigger("click");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="result"></textarea> <input type="text" id="pageNumber" value="0"></input> <button id="prev" onclick="getNewIndexAndRender('-1')">prev</button> <button id="next" onclick="getNewIndexAndRender('1')">next</button>