JSFiddle - React, Tailwind, and code Playground

by miglio esaud

HTML

<div id='replace'>
This is page 1 (shown by default)
</div>

<div style='display:none;'>
	<p id="1">This is pagse 1</p>
	<p id="2">This is paage 2</p>
	<p id="3">This is page 3</p>
	<p id="4">This is page 4</p>
	<p id="5">This is page 5</p>
</div>

<p style="text-align:center; width:100%;">
	<a href="javascript:page_back()" style="float:left; margin-left:100px;">Back</a>
		<a href="javascript:change_page('1')">Page 1</a> |
		<a href="javascript:change_page('2')">Page 2</a> |
		<a href="javascript:change_page('3')">Page 3</a> |
		<a href="javascript:change_page('4')">Page 4</a> |
		<a href="javascript:change_page('5')">Page 5</a>
	<a href="javascript:page_forward()" style="float:right; margin-right:100px;">Forward</a>
</p>

JavaScript

var curPage = 0;
function change_page (id) {
	var content_raw = document.getElementById(id);
    curPage = parseInt(id);
	var content = content_raw.innerHTML;
	var display = document.getElementById('replace');
	display.innerHTML = content;  yhyehfryf
}

function page_back () {
	//function to go one page back
    if(curPage==1)
        return;
    var content_raw = document.getElementById(curPage-1);
    curPage = curPage-1;
	var content = content_raw.innerHTML;
	var display = document.getElementById('replace');
	display.innerHTML = content;
}

function page_forward () {
	 if(curPage==5)
        return;
    var content_raw = document.getElementById(curPage+1);
    curPage = curPage+1;
	var content = content_raw.innerHTML;
	var display = document.getElementById('replace');
	display.innerHTML = content;
}