Scroll Lest and Right using previous and next button

Scroll Lest and Right using previous and next button using JS

by dollysingh3192

HTML

<div id="output1">1</div>
<div id="output2">2</div>
<div id="output3">3</div>

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

JavaScript

var arr = [1,2,3,4,5,6,7];
var len = arr.length;
console.log(len)
var i = 2;

var initial = 0, last = 2;


window.addEventListener('load', function () {
    document.getElementById('prev_button').addEventListener(
        'click', // we want to listen for a click
        function (e) { // the e here is the event itself
            if(initial === 0) {
              initial = len;
            }
            if(last === 0) {
              last = len;
            }
            document.getElementById('output1').textContent = arr[(initial - 1) % len];
            document.getElementById('output2').textContent = arr[(initial) % len];
            document.getElementById('output3').textContent = arr[(last - 1) % len];
            initial = initial - 1;
            last = last - 1;
            console.log(initial, last)
        }
    );
    
    document.getElementById('next_button').addEventListener(
        'click', // we want to listen for a click
        function (e) {
            if(initial === len) {
              initial = 0;
            }
            if(last === len) {
              last = 0;
            }
            document.getElementById('output1').textContent = arr[(initial + 1) % len];
            document.getElementById('output2').textContent = arr[last % len];
            document.getElementById('output3').textContent = arr[(last + 1) % len];
            last = last + 1;
            initial = initial + 1;
            console.log(initial, last)
        }
    );
});