Array - Loop through on Click

Array - Loop through on Click

by Jason Schutz

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">


<p>The color is <span id="print"></span>.</p> 
<p>The color is <span id="btn1"></span>.</p> 
<p>The color is <span id="btn2"></span>.</p> 
<p>The color is <span id="btn3"></span>.</p> 
<p>The color is <span id="btn4"></span>.</p> 
 

<a id="click" href="#" onclick="nextElement();">Click</a>

CSS

span#print{
    background-color:#a9e2f9;
    padding:5px;
}

JavaScript

var myArray = ["grey", "yellow", "green", "blue", "purple", "orange", "#f0f", "sherpa"];
var myArray1 = ["grey", "yellow", "green", "blue", "purple", "orange", "#f0f", "sherpa"];
var myArray2 = ["grey", "yellow", "green", "blue", "purple", "orange", "#f0f", "sherpa"];
var myArray3 = ["grey", "yellow", "green", "blue", "purple", "orange", "#f0f", "sherpa"];
var myArray4 = ["grey", "yellow", "green", "blue", "purple", "orange", "#f0f", "sherpa"];

var myIndex = 1;
/* var myIndex1 = 1;
var myIndex2 = 1;
var myIndex3 = 1;
var myIndex4 = 1;  */

var print = document.getElementById('print');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var btn4 = document.getElementById('btn4');

print.innerHTML = myArray[0]; //Print first value of array right away.
print.style.color = myArray[0]; //Set color of id print.

function nextElement() {
    print.innerHTML = myArray[myIndex];
    btn1.innerHTML = myArray1[myIndex];
    btn2.innerHTML = myArray2[myIndex];
    btn3.innerHTML = myArray3[myIndex];
    btn4.innerHTML = myArray4[myIndex];

    myIndex = (myIndex + 1) % (myArray.length);
    myIndex1 = (myIndex1 + 1) % (myArray1.length);
    myIndex2 = (myIndex2 + 1) % (myArray2.length);
    myIndex3 = (myIndex3 + 1) % (myArray3.length);
    myIndex4 = (myIndex4 + 1) % (myArray4.length);
}