how to add a className to an object in array in js?-CodePudding

I have an array of objects. I want to add a class for all the objects in the array. I tried to use classNameand classList but it isn't worging. It shows me: Property 'classList' does not exist on type '{ question: string; answer1: string; answer2: string; answer3: string; answer4: string; }'.ts(2339)


const questions = [];
questions[0] = {
    question: 'מהי מסילת הרכבת הארוכה בעולם?',
    answer1: 'הכחולה',
    answer2: 'הטרנס-סיבירית',
    answer3: 'סובבת הקרחון',
    answer4: 'האוריינט אקספרס'
};
questions[1] = {
    question: 'מגלודון הוא מין פרה היסטורי של...',
    answer1: 'דינוזאור',
    answer2: 'כריש',
    answer3: 'אדם קדמון',
    answer4: 'כלב'
};
questions[2] = {
    question: 'מהי פיתקיונופוביה?',
    answer1: 'פחד מתיקים',
    answer2: 'פחד מפחדים',
    answer3: 'פחד ממדבקות',
    answer4: 'פחד מפתקים'
};

for(let i = 0; i < questions.length; i  ) {
    questions[i].classList.add('hide');
}

How can I add this class?

CodePudding user response：

Typescript?
First of all, I guess you are working in Typescript environment where you cannot extend object property list dynamically, so you should define object structure before modifications like this:

interface IQuestion {
    question: string;
    answer1:  string;
    answer2:  string;
    answer3:  string;
    answer4:  string;
    classList: [];
}

const questions: IQuestion[] = [];
questions[0] = {
    question: 'מהי מסילת הרכבת הארוכה בעולם?',
    answer1: 'הכחולה',
    answer2: 'הטרנס-סיבירית',
    answer3: 'סובבת הקרחון',
    answer4: 'האוריינט אקספרס'
};
questions[1] = {
    question: 'מגלודון הוא מין פרה היסטורי של...',
    answer1: 'דינוזאור',
    answer2: 'כריש',
    answer3: 'אדם קדמון',
    answer4: 'כלב'
};
questions[2] = {
    question: 'מהי פיתקיונופוביה?',
    answer1: 'פחד מתיקים',
    answer2: 'פחד מפחדים',
    answer3: 'פחד ממדבקות',
    answer4: 'פחד מפתקים'
};

for(let i = 0; i < questions.length; i  ) {
    questions[i].classList.push('hide');
}

DOM Elements?
Also do you mean DOM HTML Elements? Do you wanna add HTML class to element? I fear you faced with misunderstanding what you are doing, because questions are JS/TS objects, not DOM Element references.
For example, you can access to them by class name like this:

const questions = document.getElementsByClassName('yourclass');
for(let i = 0; i < questions.length; i  ) {
    questions[i].classList.push('hide');
}

But it's not a good solution if you are working with framework: VueJS/Angular etc.

CodePudding user response：

I think you want to add property classList to your objects, so you can do it like this by remove add method.(If you are using Typescript maybe you need edit your questions` type)

const questions = [];
questions[0] = {
    question: 'מהי מסילת הרכבת הארוכה בעולם?',
    answer1: 'הכחולה',
    answer2: 'הטרנס-סיבירית',
    answer3: 'סובבת הקרחון',
    answer4: 'האוריינט אקספרס'
};
questions[1] = {
    question: 'מגלודון הוא מין פרה היסטורי של...',
    answer1: 'דינוזאור',
    answer2: 'כריש',
    answer3: 'אדם קדמון',
    answer4: 'כלב'
};
questions[2] = {
    question: 'מהי פיתקיונופוביה?',
    answer1: 'פחד מתיקים',
    answer2: 'פחד מפחדים',
    answer3: 'פחד ממדבקות',
    answer4: 'פחד מפתקים'
};

for(let i = 0; i < questions.length; i  ) {
    questions[i].classList = 'hide';
}

console.log(questions);