时间戳

首页 > 解决方案 > 如何将 HTML 集合复制到 JS 中的数组

javascript - 如何将 HTML 集合复制到 JS 中的数组

问题描述

我想将网页中所有按钮的颜色保存在数组中并更改按钮的颜色。稍后我希望能够访问这些颜色并再次将其转回。这是我的 HTML 代码

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>

所以我有这个下拉菜单，如果你选择红色，页面上的所有按钮都会变成红色。但是如果你选择重置，它必须把颜色改回来。目前，当 all_buttons 变量发生变化时，copyAllButtons 变量也在发生变化，所以它给了我错误：

未捕获的 DOMException：无法在“DOMTokenList”上执行“添加”：提供的令牌（“[object HTMLButtonElement]”）包含 HTML 空格字符，这些字符在令牌中无效。

我能做些什么？

标签： javascriptweb-deployment

解决方案

您访问 DOM 节点，而不是实际的类。你的 buttonColorReset 函数应该是这样的：

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].className)
  }
}

推荐阅读