0

I tried to add JavaScript function to similar element but unfortunately it doesn't work.

I also tried modifying JavaScript code by using querySelectorAll and Foreach but it didn't worked, It add the class but when it come to removing class it broke down and console just kept throwing undefined errors.

I will appreciate any kind of help

thank you

const clc = document.querySelectorAll('.cancel');
const arr = document.querySelectorAll('.arr_container');
const left_container = document.querySelectorAll('.left_container');

arr.forEach(function (ar){
    ar.addEventListener("click", () => {
        ar.classList.add("active_arr");
        if (left_container.classList.contains("off")) {
            left_container.classList.remove("off");
            left_container.classList.add("active");
        }
    })
} );

clc.forEach(function (cl) {
    cl.addEventListener("click", () => {
        arr.classList.remove("active_arr");
        if (left_container.classList.contains("active")) {
            left_container.classList.remove("active");
            left_container.classList.add("off");
        }
    })
});
<div class="main center">
            <div class="box center">
                <img src="">
                <div>
                    <p class="user_name">Mor Maz</p>
                    <p class="skill">Front-end Developer</p>
                </div>
                <div class="arr_container center">
                    <i class="fas fa-arrow-right"></i>
                </div>
                <div class="left_container off">
                    <p>Skill</p>
                    <div class="skill">
                        <div>Html</div>
                        <div>Css</div>
                        <div>React</div>
                        <div>Node Js</div>
                    </div>
                    <div class="icons">
                        <i class="fab fa-github"></i>
                        <i class="fab fa-twitter"></i>
                        <i class="fab fa-facebook"></i>
                    </div>
                    <div class="cancel">
                        <i class="fas fa-times"></i>
                    </div>
                </div>
            </div>
            <div class="box center">
                <img src="">
                <div>
                    <p class="user_name">Mor Maz</p>
                    <p class="skill">Front-end Developer</p>
                </div>
                <div class="arr_container center">
                    <i class="fas fa-arrow-right"></i>
                </div>
                <div class="left_container off">
                    <p>Skill</p>
                    <div class="skill">
                        <div>Html</div>
                        <div>Css</div>
                        <div>React</div>
                        <div>Node Js</div>
                    </div>
                    <div class="icons">
                        <i class="fab fa-github"></i>
                        <i class="fab fa-twitter"></i>
                        <i class="fab fa-facebook"></i>
                    </div>
                    <div class="cancel">
                        <i class="fas fa-times"></i>
                    </div>
                </div>
            </div>
        </div>
sajad.sharhani
  • 35
  • 8
  • `document.querySelector` only returns the *first* marching element. To select multiple elements you'll need to use `document.querySelectorAll` and loop over the results. (Refer to the linked duplicate for more details and examples.) Or in the case of adding the same event handler to many elements you might also consider [event delegation](https://stackoverflow.com/q/1687296/328193) to add only one handler to a common parent element. – David Aug 22 '21 at 19:56

0 Answers0