classList.add(). How to Insert Variable Instead of String?

Question

I'm trying to make a loop that changes the class of an element everytime it is executed

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 Error Message

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

Is it possible to use the output of the variable? If not, what is the solution? Please advise.

CertainPerformance · Accepted Answer · 2019-11-24 04:13:55Z

1

Your choices array, which gets passed to classList.add, is:

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

But spaces are invalid characters in a class name. classList.add will see that as you attempting to add a single class which contains a space, rather than as an attempt to add two separate classes. Assign the string to the className of the element instead (this will overwrite any previous class names too):

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

While you can add multiple classes with classList.add by passing additional arguments (on browsers newer than IE11), eg

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

That's overkill for this situation (and requires you to separately clear the classes beforehand).

answered Nov 24, 2019 at 4:13

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CertainPerformance Over a year ago

When an answer solves your problem, you may consider marking it as Accepted (check the checkbox on the left) to indicate that the issue is resolved :)

Dinesh Raj · Accepted Answer · 2019-11-24 09:17:36Z

1

The below worked at last :)

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

thank you CertainPerformance

answered Nov 24, 2019 at 9:17

Dinesh Raj

313 bronze badges

Collectives™ on Stack Overflow

classList.add(). How to Insert Variable Instead of String?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related