How to add a className to an object in array in js?

ncmi · Dec 7, 2021

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)

JavaScript:

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?

CodeMonkeyJ · Dec 9, 2021

classList is a property of HTML/DOM elements, not of bare JavaScript objects. I assume you're creating HTML elements out of the questions and those elements should get that class. Below is an example of creating paragraph tags for each question, with the text of the paragraph being the question itself. If you use the DOM inspector on your browser, you can see that they do have the 'hide' class. You can use the questionElements array to reference those tags later in your script.

HTML:

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

            for(let i = 0; i < questions.length; i++) {
                var el = document.createElement('p');
                el.innerText = questions[i]['question'];
                el.classList.add('hide');
                document.body.appendChild(el);
                questionElements.push(el);
            }
        </script>
    </body>
</html>

How can I output an array in sequence to various div's?	2	Dec 29, 2022
Converting an Array to a String in JavaScript	7	Sep 22, 2023
C# list/array of Images to JS	0	Nov 23, 2021
I want to Display Excel As HTML In js	2	Feb 24, 2023
Add recipes using JavaScript in table	20	Apr 17, 2023
Small JS Countdown timer where user has to type string of numbers to stop it and win	8	Jun 16, 2024
Create constant in JS from JSON	5	Jul 8, 2022
How to display input options only after selecting an option from the 'select class' tag JS?	6	May 12, 2023

How to add a className to an object in array in js?

ncmi

CodeMonkeyJ

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads