How can dynamic text per array be displayed?

Question

By pressing the Next-Button the text should change dynamically. I use arrays for that. Now the order is not correct.

In the following example I try to display the text per array, at the moment this is still wrong. The text should look like this:

Argument arr1,1 Argument arr1,2 Argument arr1,3

After pressing the Next-Button the next array should be loaded. That should then look like this:

Argument arr2,1 Argument arr2,2 Argument arr2,3

Does anyone have a solution for that? Thank you.

//////////Text Array1//////////
	
var arr1 = [
	"Argument arr1,1",
	"Argument arr1,2",
	"Argument arr1,3",
	"Argument arr1,4",
];

var i1 = -1;
	
function nextItem1() {		
	i1 = i1 + 1; 	
	i1 = i1 % arr1.length 
		
  return arr1[i1]	
}

function prevItem1() {
	if (i1 === 0) { 
		  i1 = arr1.length 		
}
	
	i1 = i1 - 1; 
	return arr1[i1];	
}

window.addEventListener('load', function () {		
	document.getElementById.textContent = arr1[0]; 	
	document.getElementById('prev_button').addEventListener(	
		'click', 		
		function (e) { 
			document.getElementById('arr1').textContent = prevItem1();				
	}			
);
    
	document.getElementById('next_button').addEventListener(
		'click', 
		function (e) { 
			document.getElementById('arr1').textContent = nextItem1();      
		}
	);
});
	
//////////Text Array2//////////

var arr2 = [
	"Argument arr2,1",
	"Argument arr2,2",
	"Argument arr2,3",
	"Argument arr2,4",
];
	
var i2 = -1;

function nextItem2() {    
	i2 = i2 + 1;    
	i2 = i2 % arr2.length
		
  return arr2[i2];	
}

function prevItem2() {
   if (i2 === 0) { 
   i2 = arr2.length		
}
   i2 = i2 - 1; 
   return arr2[i2];	
}

window.addEventListener('load', function () {	
	document.getElementById.textContent = arr2[0]; 
	document.getElementById('prev_button').addEventListener(	
		'click', 
		function (e) { 
			document.getElementById('arr2').textContent = prevItem2();			
	}
);
    
document.getElementById('next_button').addEventListener(
		'click', 
		function (e) { 
			document.getElementById('arr2').textContent = nextItem2();				
		}
	);
});
	
//////////Text Array3//////////
	
var arr3 = [
	"Argument arr3,1",
	"Argument arr3,2",
	"Argument arr3,3",
	"Argument arr3,4",
];
	
var i3 = -1;

function nextItem3() {    
	i3 = i3 + 1;    
	i3 = i3 % arr3.length
		
  return arr3[i3];	
}

function prevItem3() {
  if (i3 === 0) { 
  i3 = arr3.length		
}
  i3 = i3 - 1; 
  return arr3[i3];	
}

window.addEventListener('load', function () {	
	document.getElementById.textContent = arr3[0]; 	
	document.getElementById('prev_button').addEventListener(	
		'click', 
		function (e) { 
			document.getElementById('arr3').textContent = prevItem3();			
	}
);
    
document.getElementById('next_button').addEventListener(
		'click', 
		function (e) { 
			document.getElementById('arr3').textContent = nextItem3();			
		}
	);
});
  

#arr1 {
	font-family:Arial,sans-serif; 
	font-size: 1em; 
	color:black;
	margin-top: 5px;
	margin-left: 10px;
}

#arr2 {
	font-family:Arial,sans-serif; 
	font-size: 1em; 
	color:black;
	margin-top: 5px;
	margin-left: 10px;
	}

#arr3 {
	font-family:Arial,sans-serif; 
	font-size: 1em; 
	color:black;
	margin-top: 5px;
	margin-left: 10px;
	}

<p id="arr1">Test Text</p>
<p id="arr2">Test Text</p>
<p id="arr3">Test Text</p>

<input type="button" id="prev_button" value="<< Prev" onclick="prev_button">
<input type="button" id="next_button" value="Next >>" onclick="next_button">

Answer 1

I kinda had to restructure the code. Do me a favor, and keep reading tutorials, watch videos, while you learn. Certain things like i3 = i3 + 1; i3 = i3 % arr3.length instead of using the index looks strange to me.

// You can simplify this code alot, since basically you have exactly the same event multiple times.
// a single variable to hold the index of our active array.
var currentArray = 0;
// We can put all our arrays into an array as well, so that we can add or remove arrays without actually having to write `var arr4 = [];`
var arrays = [
	[ "Argument arr1,1", "Argument arr1,2", "Argument arr1,3", "Argument arr1,4", ],
	[ "Argument arr2,1", "Argument arr2,2", "Argument arr2,3", "Argument arr2,4", ],
	[ "Argument arr3,1", "Argument arr3,2", "Argument arr3,3", "Argument arr3,4", ]
];
// TO change the text, we need the text from 1 array to fill up all 3 of the fields.
var renderArray = function renderArray( ary ) {
	document.querySelector( '#arr1' ).textContent = ary[ 0 ];
	document.querySelector( '#arr2' ).textContent = ary[ 1 ];
	document.querySelector( '#arr3' ).textContent = ary[ 2 ];
};
// Since our active array is just an index, add or subtract 1 from the index, resetting it if the new number doesn't have an array.
var previous = function previous( event ) {
	currentArray -= 1;
	if ( currentArray < 0 ) currentArray = arrays.length - 1;
	renderArray( arrays[ currentArray ] );
};
// The reverse of previous
var next = function next( event ) {
	currentArray += 1;
	if ( currentArray > arrays.length - 1 ) currentArray = 0;
	renderArray( arrays[ currentArray ] );
};
document.querySelector( '#prev_button' ).addEventListener( 'click', previous );
document.querySelector( '#next_button' ).addEventListener( 'click', next );

<p id="arr1">Test Text</p>
<p id="arr2">Test Text</p>
<p id="arr3">Test Text</p>
<input type="button" id="prev_button" value="<< Prev">
<input type="button" id="next_button" value="Next >>">