Button Container2

Rotate the outer numbers with no global variables

by trentHarlem

HTML

<div id='button-container'>
<button id='btn1' class='rotate row1'>1</button>	
<button id='btn2' class='rotate row1'>2</button>	
<button id='btn3' class='rotate row1'>3</button>	
<button id='btn4' class='rotate row2'>4</button>
<button id='btn5' onclick='updateButtons()'>5</button>
<button id='btn6' class='rotate row2'>6</button>	
<button id='btn7' class='rotate row3'>7</button>	
<button id='btn8' class='rotate row3'>8</button>	
<button id='btn9' class='rotate row3'>9</button>	
</div>

CSS

#bts {
  width: 75%;
}

button {
  width: 30%;
  height: 48px;
  font-size: 24px;
}

/* 
#button-container{
display: -webkit-flex;
  display: flex;
   
 -webkit-flex-flow: row;
  flex-flow: row;
  flex-direction: row;
}
.row {
  flex-flow: wrap;
}
.row2{
-webkit-order: 2;
  order: 2;
}

.row3{
  flex-wrap: wrap-reverse; 
 -webkit-order: 1;
  order: 1;   
} 
*/

JavaScript

function updateButtons() {
  let rotator = [`${btn4.innerHTML}`, `${btn1.innerHTML}`, `${btn2.innerHTML}`, `${btn7.innerHTML}`, `${btn3.innerHTML}`, `${btn8.innerHTML}`, `${btn9.innerHTML}`, `${btn6.innerHTML}`];
//console.log(rotator)
  const outerButtons = document.querySelectorAll('.rotate')
  const buttonArray = Array.from(outerButtons)
  buttonArray.forEach((btn, i) => btn.innerHTML = rotator[i])
}