类列表.add()。如何插入变量而不是字符串？答案

【问题标题】：classList.add(). How to Insert Variable Instead of String?类列表.add()。如何插入变量而不是字符串？
【发布时间】：2020-03-19 17:25:10
【问题描述】：

我正在尝试创建一个循环，每次执行时都会更改元素的类

HTML

<select class="form-control" id="FormControlSelect2" onchange="changeButtonColor2(this)">
<option value="Random1">Random</option>
</select>

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


function changeButtonColor2(buttonThingy) {
  if (buttonThingy.value === 'Random1') {
    buttonsRandom();
  }
}

function buttonsRandom() {
  for (let i=0; i < all_buttons.length; i++ ){
    all_buttons[i].classList.remove(all_buttons[i].classList[1]);
  }
  var choices = ['btn btn-primary', 'btn btn-success', 'btn btn-danger',
  'btn btn-warning','btn btn-secondary','btn btn-info', 'btn btn-dark',];
  var randomNumber = Math.floor(Math.random() * 7);
  var randomClass = choices[randomNumber];
  for (let i = 0; i < randomClass.length; i += 1) {
    all_buttons[i].classList.add(randomClass[i]);
}

}

JS 错误信息

InvalidCharacterError: The string contains invalid characters. (= last line of the JS code)

是否可以使用变量的输出？如果不是，解决方案是什么？请指教。

【问题讨论】：

标签： javascript loops variables

【解决方案1】：

传递给classList.add 的choices 数组是：

var choices = ['btn btn-primary', 'btn btn-success', 'btn btn-danger',
  'btn btn-warning','btn btn-secondary','btn btn-info', 'btn btn-dark',];

但是空格是类名中的无效字符。 classList.add 会在您尝试添加包含空格的 single 类时看到这一点，而不是尝试添加两个单独的类。将字符串分配给元素的className（这也会覆盖任何以前的类名）：

function buttonsRandom() {
  var choices = ['btn btn-primary', 'btn btn-success', 'btn btn-danger',
                 'btn btn-warning','btn btn-secondary','btn btn-info', 'btn btn-dark',];
  var randomNumber = Math.floor(Math.random() * 7);
  var randomClass = choices[randomNumber];
  for (let i = 0; i < randomClass.length; i += 1) {
    all_buttons[i].className = randomClass[i];
  }
}

虽然您可以通过传递额外的参数（在 IE11 之后的浏览器上）使用 classList.add 添加多个类，例如

all_buttons[i].classList.add(...randomClass[i].split(' '));

这对于这种情况来说是多余的（并且需要您事先单独清除类）。

【讨论】：

当一个答案解决了您的问题时，您可以考虑将其标记为已接受（选中左侧的复选框）以表明问题已解决:)

【解决方案2】：

以下终于成功了:)

function buttonsRandom() {
  var choices = ['btn-primary', 'btn-success', 'btn-danger',
  'btn-warning','btn-secondary','btn-info', 'btn-dark',];
  var randomNumber = Math.floor(Math.random() * 7);
  var randomClass = choices[randomNumber];
  console.log(randomClass);
  for (let i=0; i < all_buttons.length; i++ ){
    all_buttons[i].classList.remove(all_buttons[i].classList[1]);
    all_buttons[i].classList.add(randomClass);
  }

谢谢CertainPerformance

【讨论】：