How to copy a HTML collection to an array in JS without changing each other

Question

I want to save the color of all my buttons in a Webpage in an array and change the color of my buttons. Later I want to be able to access that colors and turn it back again. This is my HTML code

var all_buttons = document.getElementsByTagName('button');
var copyAllButtons = [];

for (let i = 0; i < all_buttons.length; i++) {
  copyAllButtons.push(all_buttons[i]);
}

function buttonColorChange(buttonThis) {

  if (buttonThis.value === 'red') {
    buttonsRed();
  } else if (buttonThis.value === 'reset') {
    buttonColorReset();
  }
}

function buttonsRed() {
  for (let i = 0; i < all_buttons.length; i++) {
    all_buttons[i].classList.remove(all_buttons[i].classList[1]);
    all_buttons[i].classList.add('btn-danger');
  }
}

function buttonColorReset() {
  for (let i = 0; i < all_buttons.length; i++) {
    console.log(typeof(all_buttons));
    all_buttons[i].classList.remove(all_buttons[i].classList[1]);
    console.log(copyAllButtons[0].classList);
    all_buttons[i].classList.add(copyAllButtons[i]);
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="flex-box-pick-color">
  <form action="">
    <select name="backdrop" id="background" onchange="buttonColorChange(this)">
      <option value="random">Random</option>
      <option value="red">Red</option>
      <option value="reset">Reset</option>
    </select>
  </form>
  <button class="btn btn-primary">Whatever</button>
  <button class="btn btn-danger">Nothing</button>
  <button class="btn btn-warning">:)</button>
  <button class="btn btn-success">(:</button>
</div>

So I have this dropdown, and if you select red, all the buttons on the page become red. But if you select reset, it must change the colors back. Currently, the copyAllButtons variable is also changing when the all_buttons variable changes, so then it gives me the error:

Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('[object HTMLButtonElement]') contains HTML space characters, which are not valid in tokens.

What can I do?

Answer 1

You should just save the initial classes in your array. does this work?

var all_buttons = document.getElementsByTagName('button');

var defaultClasses = [];

for (let i = 0; i < all_buttons.length; i++) {
  defaultClasses.push(all_buttons[i].classList.value);
}

function buttonColorChange(buttonThis) {
  if (buttonThis.value === 'red') {
    buttonsRed();
  } else if (buttonThis.value === 'reset') {
    buttonColorReset();
  }
}

function buttonsRed() {
  for (let i = 0; i < all_buttons.length; i++) {
    all_buttons[i].classList = 'btn btn-danger';
  }
}

function buttonColorReset() {
  for (let i = 0; i < all_buttons.length; i++) {
    all_buttons[i].classList = defaultClasses[i];
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="flex-box-pick-color">
  <form action="">
    <select name="backdrop" id="background" onchange="buttonColorChange(this)">
      <option value="random">Random</option>
      <option value="red">Red</option>
      <option value="reset">Reset</option>
    </select>
  </form>
  <button class="btn btn-primary">Whatever</button>
  <button class="btn btn-danger">Nothing</button>
  <button class="btn btn-warning">:)</button>
  <button class="btn btn-success">(:</button>
</div>