JSFiddle - React, Tailwind, and code Playground

by reporter

HTML

<body onload="showPicNo(a)">
    <div id="picture"><img name="picturegallery"></div>
    <div id="navigation">
       <a href="javascript:bw()">Backward</a> | <a href="javascript:fw()">Forward</a>
    </div>
  <body>

JavaScript

/*
    The array 'pics' contains all adresses of picture you want to show. Scrope: global
*/
var pics=new Array (
    "https://www.gravatar.com/avatar/9be5d328127c377109b295b5941733fb?s=32&d=identicon&r=PG",
    "https://www.gravatar.com/avatar/1e81ddcda5d50a39c2beeaba3797702a?s=32&d=identicon&r=PG&f=1",
    "https://www.gravatar.com/avatar/f47359966d28f2e603b6f759855970db?s=32&d=identicon&r=PG&f=1",
    "https://www.gravatar.com/avatar/7d1a2026b0dca412b04ec548397b37f6?s=32&d=identicon&r=PG"
    );
/* 
    The variable to used as the minimum number of elements and container for the current picture.
    Because we work with an array, the index from first array element is zero.
    Scope: global
*/ 
var a = 0;
/* 
   The variabe that used as the maximum number of showed pictures.
   Here: The number of elements from array 'pics'. Scrope: global
*/
var b = pics.length;
/*
    The current url that contains the adressbar from browser. Scope: global
*/
var currentUrl = document.URL;
/* 
  ---------------------------------------------------------------------------------
    Initial quicktest, if the parameter 'picnoprogram' does exits.
    The parameter 'picnoprogram' is used parallel as an indicator and
    as persistance layer.
    Scope: global
*/
var existsPicParameter = currentUrl.match(/picnoparam\S*/i);
/*
    Some helper variables. Scope: global
*/
var tmpPicParameter, tmpPicParameterOld;

/*
    First requirement: If the page was loaded the first time, it shall be show a
    random picture from all available pictures.
    The value of variable 'existsPicParamete' will be Null, if the parameter does not
    exists in the adress bar; else a list of elements will be stored in here.
*/
if (existsPicParameter != null)
{
   /*
        So the page wasn't been loaded at first time.
        We need the index from the last showed picture.
  */
  tmpPicParameter = existsPicParameter[0].match(/picnoparam=\d+/i);
  if (tmpPicParameter != null)
  {
    /*
        Extracting...