javascript - DOM error while using .classList.add method - Stack Overflow

admin管理员组

文章数量:1201837

So when I'm trying to add two classes to my elemeny by this code

var curr_class = document.getElementById(hover_start).className
document.getElementById(hover_start).classList.add("cell-red",curr_class)

I have this error

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

I don't see any incorrect white space in here

So when I'm trying to add two classes to my elemeny by this code

var curr_class = document.getElementById(hover_start).className
document.getElementById(hover_start).classList.add("cell-red",curr_class)

I have this error

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

I don't see any incorrect white space in here

• javascript

Share Improve this question Follow edited May 9, 2023 at 15:50 Moritz Ringler 15.8k1010 gold badges2727 silver badges4545 bronze badges asked Nov 17, 2020 at 10:41 polpol 10911 gold badge11 silver badge55 bronze badges 1

• what is hover_start? is it ID of the DOM element? – wangdev87 Commented Nov 17, 2020 at 10:42

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 12

What seems to be the issue is that curr_class is a string containing a space

According to the doc https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList

You should add the class one by one.

Note also that what your code does is : it takes the class of an element and adds it to the same element so nothing usefull

It seems like you have a space in your class name: 1 cell-red between 1 and cell-red.

One solution would be to add the classes one by one:

myElement.classList.add('1');
myElement.classList.add('cell-red');

@CharybdeBE is correct

Alternatively you could separate the classes with commas inside the add function.

For example:

myElement.classList.add('class1', 'class2', 'class3');

This error also occurs when the class is an empty string. Therefore it is necessary to:

1. trim the string before passing it in (since DOMTokenList will try to trim and error)
2. check if the string is empty before calling add()
3. split the string by spaces
4. spread the array of strings as params

Example usage from a function used to convert an img to a canvas:

const ns = {
  canvas: (o = {}) => {
    o.img ??= new Image();
    o.cls ??= ''; //can pass in class string with spaces
    o.w ??= 100;
    o.h ??= 100;
    o.canvas ??= document.createElement("canvas");
    o.canvas.width = o.w;
    o.canvas.height = o.h;
    o.ctx = o.canvas.getContext('2d', {
      willReadFrequently: true
    });
    o.ctx.drawImage(o.img, 0, 0, o.w, o.h);
    o.cls.trim(); //trims the whitespace before DOMTokenList errors
    o.cls && o.canvas.classList.add(...o.cls.split(' ')); //string is not empty, split by whitespace, spread as params
    return o.canvas;
  }
}

I've also faced same issue. Resolved by removing space from class list.

Before : (here space is included) class="flow-type "

After : class="flow-type"

according to the mozila documentation. The add method parameters is an overflow parameter.

Here is an example to add the overflow parameter on add method. notes: I added the trim() method to avoid some typo string on the element hover_id

const hover_start = "hover_id"
var curr_class = document.getElementById(hover_start).className.trim().split(" ")
const classes = ["cell-red", ...curr_class]
document.getElementById(hover_start).classList.add(...classes)

console.log(document.getElementById(hover_start).className)

<div id='hover_id' class='a b c'></div>

If you just want to add a cell-red class. You can just add('cell-red') here is the example

const hover_start = "hover_id"
document.getElementById(hover_start).classList.add("cell-red")

console.log(document.getElementById(hover_start).className)

<div id="hover_id" class="a b c"></div>

本文标签： javascriptDOM error while using classListadd methodStack Overflow