How can I add a CSS class with an onclick event?-CodePudding

I am trying to add a CSS class with an onclick event using JavaScript.

This is my html.

<!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">
    <link rel="stylesheet" href="weekly.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8 y gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
</head>
<body>
    <div >
        <div >
            <div >
                    <h5>MON</h5>
                    <p>January 9</p>
            </div>
            <div >
                <div >
                    <div >

                    </div>
                    <div >

                    </div>
                    <div >
                        
                    </div>
                </div>
            </div>
            
        </div>
        <div >
            <div >
                    <h5>TUE</h5>
                    <p>January 10</p>
            </div>
            <div ><div >
                <div >

                </div>
                <div >

                </div>
                <div ></div>
            </div></div>
            
        </div>
        <div >
            <div >
                    <h5>WED</h5>
                    <p>January 11</p>
            </div>
            <div >
                <div >
                    <div >

                    </div>
                    <div >

                    </div>
                    <div >
                        
                    </div>
                </div>
            </div>
            
        </div>
        <div >
            <div >
                    <h5>THU</h5>
                    <p>January 12</p>
            </div>
            <div >
                <div >
                    <div >
                        <i ></i>
                        <p>10AM - 6PM</p>
                    </div>
                    <div >
                        <p >Water Park</p>
                        <p >10AM - 6PM</p>
                    </div>
                    <div >
                        <p >Safari</p>
                        <p >10AM - 6PM</p>
                    </div>
                    <hr>
                </div>
                <div >
                    <div >
                        <i ></i>
                        <p >Pass Holder Appreciation Week</p>
                    </div>
                    <div >
                        <i ></i>
                        <p >Christmas in the Park</p>
                    </div>
                </div>
            </div>
        </div>
        <div >
            <div >
                    <h5>FRI</h5>
                    <p>January 13</p>
            </div>
            <div >
                <div >
                    <div >
                        <i ></i>
                        <p >10AM - 6PM</p>
                    </div>
                    <div >

                    </div>
                    <div >
                        
                    </div>
                </div>
            </div>
            
        </div>
        <div >
            <div >
                    <h5>SAT</h5>
                    <p>January 14</p>
            </div>
            <div >
                <div >
                    <div >
                        <i ></i>
                        <p >10AM - 6PM</p>
                    </div>
                    <div >
                    </div>
                    <div >
                        
                    </div>
                </div>
            </div>
            
        </div>
        <div >
            <div >
                    <h5>SUN</h5>
                    <p>January 15</p>
            </div>
            <div >
                <div >
                    <div >

                    </div>
                    <div >

                    </div>
                    <div >
                        
                    </div>
                </div>
            </div>
            </div>
        </div>

    </div>

    <script src="script.js"></script>
</body>
</html>

And this is my script where I target the divs with a class that I am targetting.

let heading = document.querySelectorAll(".sf_day_card_heading");

I want to add a CSS class that changes the background color to yellow to the div that I select but I don´t know how to start with the logic.

I know I have to do a function with an onclick event and add the CSS class but I don't know how.

CodePudding user response：

once you have the particular element in a variable you use it to access the properties. In your example, you can play with the CSS by:

heading.style.border = "1px solid #000";
heading.style.backgroundColor: "#fff";

CodePudding user response：

This should work

let heading = document.querySelectorAll(".sf_day_card_heading");
heading.forEach((el) => el.classList.add('your_class_name'));

Let me know if this helps.