classList.add() Insert variable instead of string

Question

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

classList.add('something')

requires string and I need to put a variable there, here is my code:

const head = document.createElement('div');

function change_head() {
    var head_class = [
        {name: "bold"},
        {name: "rainbow_head"},
        {name: "hut_head"},
        {name: "beats_head"}
    ];
    for (let i = 0; i < head_class.length; i += 1){
        diffrent_head = head_class[i];
        head.classList.add(head_class[i]);
    }
};

Hope it is possible to somehow use a variable here.

Sami Hult · Accepted Answer · 2018-12-02 08:20:08Z

1

In your head_class array, you have objects with a field name, which has a string value. Use that:

for (let i = 0; i < head_class.length; i += 1){
    head.classList.add(head_class[i].name);
}

answered Dec 2, 2018 at 8:20

Sami Hult

3,0821 gold badge14 silver badges17 bronze badges

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

Comments

CertainPerformance · Accepted Answer · 2018-12-02 08:20:37Z

The problem is that you need to access the .name property in order to get to the string:

head.classList.add(head_class[i].name);

const head = document.createElement('div');

function change_head() {
    var head_class = [
        {name: "bold"},
        {name: "rainbow_head"},
        {name: "hut_head"},
        {name: "beats_head"}
    ];
    for (let i = 0; i < head_class.length; i += 1){
        diffrent_head = head_class[i];
        head.classList.add(head_class[i].name);
    }
}
change_head();
console.log(head.className);

But there's a better looking option - you can .map the head_class to just the strings (extract the .name property from each), then spread the array of strings into .add, resulting in .add being called only once:

const head = document.createElement('div');

function change_head() {
    var head_class = [
        {name: "bold"},
        {name: "rainbow_head"},
        {name: "hut_head"},
        {name: "beats_head"}
    ];
    head.classList.add(
      ...head_class.map(({ name }) => name)
    );
}
change_head();
console.log(head.className);

Collectives™ on Stack Overflow

classList.add() Insert variable instead of string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related