首页 > 解决方案 > 类列表.add()。如何插入变量而不是字符串?

问题描述

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

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)

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

标签: javascriptloopsvariables

解决方案


下面的工作终于:)

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

谢谢你一定的表现


推荐阅读