Question

我试图做一个循环，每次执行时都会更改元素的类

HTML

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

JS

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)

是否可以使用变量的输出？如果没有，解决方案是什么？请告知。

Answer 1

您传递给choices的{{1}}数组是：

classList.add

但是空格是类名中的无效字符。 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（这也会覆盖以前的任何类名）：

className

可以通过传递附加参数（在比IE11更高的浏览器上）添加带有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]; } }的多个类，例如

classList.add

在这种情况下，这太过夸张了（需要您事先分别清除课程）。

Answer 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);
  }

谢谢您某些性能

classList.add（）。如何插入变量而不是字符串？

2 个答案: