CODEWITHSUNDEEP
javascripthtmlcssevents
Thierry Mugisha
Thierry Mugisha

Reputation: 119

How to add style on element which have multiple same class name with other elements in javaScript using .classList.add(‘class’)

I have multiple elements which have same class name, so I’m trying to get that class and add to it styles using JavaScript but it’s not working as expected. I want that each elements I hover over will get the style a settled in css, But not all elements.

This I what I tried:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *, *::after, *::before {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: rgb(233, 232, 255);
        }
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .card {
            width: 300px;
            height: 300px;
        }
        /* The style i want on each card when i hover over*/
        .transparent {
            opacity: 0.5;
        }
        /*---------------*/
        .card-1 {
            background-color: rgb(144, 140, 223);
        }
        .card-2 {
            background-color: rgb(133, 207, 163);
        }
        .card-3 {
            background-color: rgb(241, 157, 234);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card card-1"></div>
        <div class="card card-2"></div>
        <div class="card card-3"></div>
    </div>

    <script>
        const makeCardTransparent = (cardClassName) => {
            const card = document.getElementsByClassName(cardClassName)
            if(card){
                for(var i = 0; i < card.length; i++){
                    card[i].addEventListener('mouseover', () => {
                        card[i].classList.add('transparent');
                })
                }
            }
        }
        makeCardTransparent('card')
    </script>
</body>
</html>

But this is the error I got in javaScript console:

TypeError: undefined is not an object (evaluating 'card[i].classList')

Can you help me how I can do it, Thank You.

EDIT The code in JavaScript is written like this one:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *, *::after, *::before {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: rgb(233, 232, 255);
        }
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sub-container {
            background-color: rgb(61, 60, 94);
            padding: 1em;
            border-right: 2px solid rgb(233, 232, 255);
        }
        .card {
            width: 300px;
            height: 300px;
        }
        /* The style i want on each card when i hover over*/
        .transparent {
            opacity: 0.5;
        }
        /*----------------------------------------------*/
        .card-1 {
            background-color: rgb(144, 140, 223);
        }
        .card-2 {
            background-color: rgb(133, 207, 163);
        }
        .card-3 {
            background-color: rgb(241, 157, 234);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sub-container">
            <div class="card card-1"></div>
        </div>
        <div class="sub-container">
            <div class="card card-2"></div>
        </div>
        <div class="sub-container">
            <div class="card card-3"></div>
        </div>
    </div>

    <script>

        const makeCardTransparent = (cardClassName, subContainerClassName) => {
            const card = document.getElementsByClassName(cardClassName)
            const subContainer = document.getElementsByClassName(subContainerClassName)

            if(card && subContainer){
                for(var i = 0; i < card.length; i++){
                    subContainer[i].addEventListener('mouseover', () => {
                        card.classList.add('transparent');
                })
                }
            }
        }
        makeCardTransparent('card')
    </script>
</body>
</html>

Upvotes: 0

Views: 976

Answers (2)

savageGoat
savageGoat

Reputation: 1546

The listener make it lose the scope of the initial loop, you must check for the target on that event

        if(card){
            for(var i = 0; i < card.length; i++){
                card[i].addEventListener('mouseover', (evt) => {
                    evt.target.classList.add('transparent');
                })
            }
        }

Also, I suggest you use @john's method as it does exactly what you are looking for in a simpler way

Upvotes: 1

John
John

Reputation: 451

You can use CSS to do this no need for JS 😃.

There is a CSS pseudo-class :hover which applies CSS on an element when hovered over. In the provided solution, the opacity reduces in 0.5s with ease. If you don't want the animation, you can simply remove the transition property.


.card {
   width: 300px;
   height: 300px;
   transition: opacity 0.5s ease;
}

.card:hover {
   opacity: 0.5;
}

Upvotes: 0

Related Questions