Javascript function to switch the css classes not working as intended

I have an HTML file which creates a 5*4 grid using td elements. Each td element has it's css class with bunch of properties.

I'm trying to switch the css classes of my <td> elements on a button click. Example, if i click 'up' button the css classes of each row should be swapped with css class of the row below, and first row should go to the last one.

function switchColorUp() {

  var allTDs = document.getElementsByTagName("td");

  

 for (var i = 0; i < allTDs.length; i++) {

  allTDs[i].classList = allTDs[(i + 4) % 20].classList;

   }

}

Codepen link-

https://codepen.io/001Abhishek/pen/NWzrZyg

It works except for the second row's css is overlapping the first and last row at same time. Hence the first row's css gets lost( check the codepen link to verify this behaviour)

Can't seem to figure out how to handle that case. Any help will be appreciated.

I tried saving first row elements in temp var and then swapping them with the last row and running the for loop till the second last row.

The reason why the first row's css gets lost is due to the for loop overwriting the first 4 values. The last 4 iterations of the for loop (ie. i = 16,17,18,19) would get the css for the overwritten first 4 elements.

The reason why saving the first row elements into a temp var does not work either is because classList returns a live DOMTokenList as seen from the documentation, which is essentially a reference.

My solution involves saving the first 4 elements as values using the toString() function:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function switchColorUp() {
  var allTDs = document.getElementsByTagName("td");
  var temp1 = allTDs[0].classList.toString();
  var temp2 = allTDs[1].classList.toString();
  var temp3 = allTDs[2].classList.toString();
  var temp4 = allTDs[3].classList.toString();
  
 for (var i = 0; i < allTDs.length; i++) {
  allTDs[i].classList = allTDs[(i + 4) % 20].classList;
 }
  allTDs[16].classList = temp1
  allTDs[17].classList = temp2;
  allTDs[18].classList = temp3;
  allTDs[19].classList = temp4;
}

<!-- language: lang-css -->

body {
  background-color: black;
}
.table {
  font-size: 1.5em;
  color: white;
  font-style: times new roman;
}
.td1 {
  border: 6px solid red;
}
.td1:hover {
  background-color: red;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td2 {
  border: 6px solid green;
}
.td2:hover {
  background-color: green;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td3 {
  border: 6px solid orangered;
}
.td3:hover {
  background-color: orangered;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td4 {
  border: 6px solid blue;
}
.td4:hover {
  background-color: blue;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td5 {
  border: 6px solid purple;
}
.td5:hover {
  background-color: purple;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td6 {
  border: 6px solid brown;
}
.td6:hover {
  background-color: brown;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td7 {
  border: 6px solid YELLOW;
}
.td7:hover {
  background-color: yellow;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td8 {
  border: 6px solid silver;
}
.td8:hover {
  background-color: silver;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td9 {
  border: 6px solid pink;
}
.td9:hover {
  background-color: pink;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}

.td10 {
  border: 6px solid cyan;
}
.td10:hover {
  background-color: cyan;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}
.td11 {
  border: 6px solid lightgreen;
}
.td11:hover {
  background-color: lightgreen;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}
.td12 {
  border: 6px solid teal;
}
.td12:hover {
  background-color: teal;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td13 {
  border: 6px solid navy;
}
.td13:hover {
  background-color: navy;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td14 {
  border: 6px solid salmon;
}
.td14:hover {
  background-color: salmon;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td15 {
  border: 6px solid olive;
}
.td15:hover {
  background-color: olive;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td16 {
  border: 6px solid darkslategray;
}
.td16:hover {
  background-color: darkslategray;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td17 {
  border: 6px solid magenta;
}
.td17:hover {
  background-color: magenta;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td18 {
  border: 6px solid white;
}
.td18:hover {
  background-color: white;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td19 {
  border: 6px solid khaki;
}
.td19:hover {
  background-color: khaki;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td20 {
  border: 6px solid yellowgreen;
}
.td20:hover {
  background-color: yellowgreen;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}
.btn1 {
  height: 550px;
  width: 400px;
  position: relative;
  margin: -570px 500px;
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: 1px 1px 10px 5px deepskyblue;
}

.button {
  cursor: pointer;
  position: absolute;
  left: 105px;
  top: 100px;
  color: deepskyblue;
  background-color: transparent;
  border-radius: 10%;
  border: 1px solid deepskyblue;
}

.button1 {
  background-color: transparent;
  cursor: pointer;
  color: deepskyblue;
  border: 1px solid deepskyblue;
  position: absolute;
  left: 40px;
  top: 150px;
  border-radius: 10%;
}

.button2 {
  cursor: pointer;
  color: deepskyblue;
  background-color: transparent;
  border: 1px solid deepskyblue;
  border-radius: 10%;

  position: absolute;
  left: 160px;
  top: 150px;
}

.button3 {
  color: deepskyblue;
  background-color: transparent;
  cursor: pointer;
  border: 1px solid deepskyblue;
  position: absolute;
  left: 100px;
  top: 200px;
  border-radius: 10%;
}
.name11 {
  color: deepskyblue;
  position: absolute;
  left: 5px;
  top: 250px;
}
.butt {
  cursor: pointer;
  position: absolute;
  left: 60px;
  top: 310px;
  color: deepskyblue;
  background-color: deepskyblue;
  border-radius: 50%;
  border: 1px solid deepskyblue;
}

.butt1 {
  cursor: pointer;
  position: absolute;
  left: 180px;
  top: 310px;
  color: deepskyblue;
  background-color: deepskyblue;
  border-radius: 50%;
  border: 1px solid deepskyblue;
}

.butt2 {
  cursor: pointer;
  position: absolute;
  left: 180px;
  top: 380px;
  color: deepskyblue;
  background-color: deepskyblue;
  border-radius: 50%;
  border: 1px solid deepskyblue;
}

.butt3 {
  cursor: pointer;
  position: absolute;
  left: 60px;
  top: 380px;
  color: deepskyblue;
  background-color: deepskyblue;
  border-radius: 50%;
  border: 1px solid deepskyblue;
}

.name {
  color: deepskyblue;
  position: absolute;
  left: 5px;
  top: 5px;
}

.pass {
  color: deepskyblue;
  font-size: 1em;
  font-family: book antiqua;
  position: absolute;
  left: 40px;
  top: 450px;
}
.pass:click {
  border: 1px solid deepskyblue;
}

<!-- language: lang-html -->

<html>

<head>
  <title>login system</title>
  <link rel="stylesheet" type="text/css" href="login.css">
</head>

<body>

  <table class="table" cellpadding=6px cellspacing=10px>

    <tr>
      <td class="td1">
        A &nbsp&nbsp B<br><br>C &nbsp&nbsp D
      </td>

      <td class="td2">
        U &nbsp&nbsp V<br><br>W &nbsp&nbsp X
      </td>

      <td class="td3">
        = &nbsp&nbsp&nbsp&nbsp (<br><br>+ &nbsp&nbsp&nbsp _
      </td>

      <td class="td4">
        a &nbsp&nbsp&nbsp&nbsp b<br><br>c &nbsp&nbsp&nbsp&nbsp d
      </td>
    </tr>

    <tr>
      <td class="td5">
        E &nbsp&nbsp F<br><br>G &nbsp&nbsp H
      </td>

      <td class="td6">
        Y &nbsp&nbsp&nbsp Z<br><br>1 &nbsp&nbsp&nbsp&nbsp 2
      </td>

      <td class="td7">
        { &nbsp&nbsp&nbsp&nbsp ]<br><br>$ &nbsp&nbsp&nbsp&nbsp !
      </td>

      <td class="td8">
        e &nbsp&nbsp&nbsp&nbsp f<br><br>g &nbsp&nbsp&nbsp h
      </td>
    </tr>

    <tr>
      <td class="td9">
        I &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp J<br><br>K &nbsp&nbsp&nbsp L
      </td>

      <td class="td10">
        3 &nbsp&nbsp&nbsp&nbsp 4<br><br>5 &nbsp &nbsp&nbsp 6
      </td>

      <td class="td11">
        i &nbsp&nbsp&nbsp&nbsp&nbsp j<br><br>k &nbsp &nbsp&nbsp l
      </td>

      <td class="td12">
        m &nbsp&nbsp n<br><br>o &nbsp &nbsp&nbsp p
      </td>
    </tr>

    <tr>
      <td class="td13">
        M &nbsp&nbsp N<br><br>O &nbsp &nbsp&nbsp P
      </td>

      <td class="td14">
        7 &nbsp&nbsp&nbsp&nbsp 8<br><br>9 &nbsp &nbsp&nbsp 0
      </td>

      <td class="td15">
        y &nbsp&nbsp&nbsp&nbsp z<br><br>} &nbsp&nbsp&nbsp %
      </td>

      <td class="td16">
        ^ &nbsp&nbsp&nbsp&nbsp [<br><br>: &nbsp&nbsp&nbsp&nbsp&nbsp ;
      </td>
    </tr>

    <tr>
      <td class="td17">
        Q &nbsp&nbsp R<br><br>S &nbsp &nbsp&nbsp T
      </td>

      <td class="td18">
        * &nbsp&nbsp&nbsp&nbsp #<br><br>@ &nbsp&nbsp&nbsp )
      </td>

      <td class="td19">
        q &nbsp&nbsp&nbsp&nbsp r<br><br>s &nbsp &nbsp&nbsp t
      </td>

      <td class="td20">
        u &nbsp&nbsp&nbsp&nbsp v<br><br>w &nbsp&nbsp&nbsp x
      </td>
    </tr>

  </table>

  <div class="btn1">

    <button class="button" type="button" onclick="switchColorUp()">UP</button>

    <button class="button1" type="button" onclick="switchColorLeft()">LEFT</button>

    <button class="button2" type="button" onclick="switchColorRight()">RIGHT</button>

    <button class="button3" type="button" onclick="switchColorDown()">DOWN</button>
    <div class="name">
      <p><u>Button To Switch Color Between Boxes:-</u></p>
    </div>
    <div class="pass">
      <u>Password:-</u><br><br><input size="40" type="password" style="border:1px solid deepskyblue;background-c
olor:black;color:deepskyblue;" name="User_password">
    </div>

    <button class="butt" type="button">.</button>

    <button class="butt1" type="button">.</button>

    <button class="butt2" type="button">.</button>

    <button class="butt3" type="button">.</button>

    <div class="name11">
      <p><u>Button To Select Character From Boxes:-</u></p>
    </div>
  </div>
</body>

</html>

<!-- end snippet -->

Hope that helps!

Perhaps, I'm not understanding your objective. I don't understand the use of (i+4)%20 when swapping rows that are next to each other; plus running the loop through the full array row will overwrite rows before you capture the old value and (i+4)%20 will exceed the size of the array.

From the text of your question, this first snippet appears to move the array values as you'd like to move the classes.

Also, since you know your table structure is fixed or contains a repeating pattern, you could make css styles on table or tr elements that use the :nth-child selector, and then change the style on the table or tr element and all the td elements will change without the need for this swapping. There is an MDN example of a styling like this, but you'd need to make a set of them for each possible combination. See the second snippet for an illustration.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var allTDs = [],
    div = document.querySelector('DIV');
for (let i = 0; i < 10; i++) allTDs[i] = "c" + (i+1);
div.textContent = allTDs.join('---');

document.body.addEventListener("click", shiftClass, false);

function shiftClass () {
  let e = event.target;
  if ( e.matches('button.up, button.up *') ) {
    let last = allTDs.length-1,
        temp = allTDs[0];
    for (var i = 0; i < last; i++) {
      allTDs[i] = allTDs[i+1];
    }
    allTDs[last] = temp;
    div.textContent = allTDs.join('---');
  } else if ( e.matches('button.dn, button.dn *') ) {
    let last = allTDs.length-1,
        temp = allTDs[last];
    for (var i = last; i > 0; i--) {
      allTDs[i] = allTDs[i-1];
    }
    allTDs[0] = temp;
    div.textContent = allTDs.join('---');
  }
}

<!-- language: lang-html -->

<button class="up">Up</button><button class="dn">Down</button>
<div></div>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let classIndex = 1,
    table = document.querySelector('table');
document.body.addEventListener("click", switchClass, false);

function switchClass () {
  let e = event.target;
  if (e.matches('button.up, button.up *')) {
    let oldIndex = classIndex;
    classIndex = classIndex == 3 ? 1 : classIndex+1;     
    table.classList.replace('type'+oldIndex,'type'+classIndex);
  } else if (e.matches('button.dn, button.dn *')) {  
    let oldIndex = classIndex;
    classIndex = classIndex == 1 ? 3 : classIndex-1;     
    table.classList.replace('type'+oldIndex,'type'+classIndex);
  }
}

<!-- language: lang-css -->

td {
 width: 50px;
 height: 30px;
 border: 1px solid black;
}

table.type1 td:nth-child(1),
table.type2 td:nth-child(2),
table.type3 td:nth-child(3) {
  background-color: rgb(100,100,100);
}

table.type1 td:nth-child(2),
table.type2 td:nth-child(3),
table.type3 td:nth-child(1) {
  background-color: rgb(150,150,150);
}

table.type1 td:nth-child(3),
table.type2 td:nth-child(1),
table.type3 td:nth-child(2) {
  background-color: rgb(200,200,200);
}

<!-- language: lang-html -->

<button class="up">Up</button><button class="dn">Down</button>
<table class="type1">
  <tbody> 
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>    
  </tbody>
</table>

<!-- end snippet -->