Javascript adding multiple css selectors using a function and classList [duplicate]

Question

I'm trying to add multiple css selectors to an element using classList that's inside a function, but keep getting the below error. How do I do this right?

Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': 
The token provided ('padding fonts') contains HTML space characters, which are not valid in tokens.

https://jsfiddle.net/nordy/h84gadst/1/

function addStyle(element,styleName) {
    element.classList.add(styleName);
}

var targetElement = document.getElementById("parent-container");

var addStyleElement = document.getElementById("addStyle");

addStyleElement.onclick = function() {
    addStyle(targetElement,'padding fonts');
}

The issue is that you're adding more than one class. It does not work that way. To add multiple classes we do like so div.classList.add("foo", "bar", "baz"); not div.classList.add("foo bar baz"); as you're doing. — Abel LIFAEFI MBULA
– Abel LIFAEFI MBULA, Commented Oct 14, 2020 at 6:19

Arkalex · Accepted Answer · 2020-10-14 06:51:58Z

2

The main problem is that classes cannot contain spaces, you can add multiple classes separated with comas like this:

element.classList.add('padding','fonts');

EDIT: If you want to send multiple classes in the same string, you can do this in the method:

function addStyle(element,styleName) {
    styleName.split(" ").forEach(class => element.classList.add(class));
}

edited Oct 14, 2020 at 6:51

answered Oct 14, 2020 at 6:09

Arkalex

1016 bronze badges

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

2 Comments

Norman Over a year ago

So how do I call addStyle() when using multiple selectors?

Arkalex Over a year ago

@Norman you can do a .split(" ") in the method, and then doing a classList.add() for each one

Ale Plo · Accepted Answer · 2020-10-14 06:14:05Z

1

If you do it like this it should work, the space is the issue

addStyleElement.onclick = function() {
addStyle(targetElement,'padding');
addStyle(targetElement,'fonts');

}

answered Oct 14, 2020 at 6:14

Ale Plo

8195 silver badges11 bronze badges

4 Comments

Norman Over a year ago

I'm trying to do it together addStyle(targetElement,'padding fonts')

Ale Plo Over a year ago

I understand but the space is generating the error

Abel LIFAEFI MBULA Over a year ago

Edit your function definition like so: function addStyle(element,styles) { element.classList.add(...styles); } We take the help of the spread operator. Now you can call it like this: addStyleElement.onclick = function() { addStyle(targetElement,['padding', 'fonts']); } Hope this helps you.

Norman Over a year ago

Solves the problem, but won't work for IE users.

Collectives™ on Stack Overflow

Javascript adding multiple css selectors using a function and classList [duplicate]

2 Answers 2

2 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Linked

Related