# How to add same script on multiple elements with same classes

**URL:** <https://forum.kirupa.com/t/how-to-add-same-script-on-multiple-elements-with-same-classes/651987>\
**Category:** web dev\
**Created:** [May 26, 2022, 1:19am UTC](https://forum.kirupa.com/t/how-to-add-same-script-on-multiple-elements-with-same-classes/651987 "2022-05-26T01:19:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [May 26, 2022, 1:19am UTC](https://forum.kirupa.com/t/how-to-add-same-script-on-multiple-elements-with-same-classes/651987/1 "2022-05-26T01:19:04Z")

</div>

Hi, Kirupa members. I need your help. 🙂  
Desperately tried many times and different combinations. Nothing works.

I need to display the modal, when user click on “Inquire” and on the “Let’s talk” button. (Please, scroll to the middle of the page to find “Let’s talk” button).  
It’s the same modal. And these 2 buttons have the same class - “open-it”.

You can see the modal if you click on the “Let’s talk” button. (But it does work thanks to another script, which uses it’s ID.)

I don’t want to use the IDs for this purpose, as it’s the same modal, each time and on many pages.  
I need the same script on each button.

Here is the script, that I’ve created. But it doesn’t work.

```auto
var btns = document.getElementsByClassName("open-it");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function (e) {
            this.classList.toggle('show-modal');
            console.log('hi');
            e.preventDefault();
        });
    }

```

The site is here [https://curology-site.netlify.app/](https://curology-site.netlify.app/)

Could you please help to fix the script.  
Thank you very much in advance. 🙂

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [May 27, 2022, 11:30am UTC](https://forum.kirupa.com/t/how-to-add-same-script-on-multiple-elements-with-same-classes/651987/2 "2022-05-27T11:30:17Z")

</div>

Hi Helena,  
The script that you’ve created toggles the class `"show-modal"` on the button itself (`this`) and not the modal.

You can either target the modal by a unique `id, class, attribute`. (part/ dataset ect)

If you don’t want to use the id (or maybe you don’t want to use the global reference) the easiest way to target it is by the class.

But if you ever add another modal with `class = 'modal'` it will break.

I would just put a part attribute on the modal and target it that way.  
e.g.

`<section part = 'enquire-modal' class = '1 2 3">`

```auto
var btns = document.getElementsByClassName("open-it");

    for (var i = 0; i < btns.length; i++) {

        btns[i].addEventListener("click", function (e) {

            let modal = document.querySelector('[part = "enquire-modal"]')

            modal.classList.toggle('show-modal');

            e.preventDefault();

        });

```

```
}
```

---

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [June 12, 2022, 2:57pm UTC](https://forum.kirupa.com/t/how-to-add-same-script-on-multiple-elements-with-same-classes/651987/3 "2022-06-12T14:57:01Z")

</div>

Hi, @steve.mills Thank you very much for your answer. 🙂  
I’ve added your code, but it still doesn’t work.  
Could you, please, take a look [https://curology-site.netlify.app/](https://curology-site.netlify.app/)

Thank you very much in advance.

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [June 13, 2022, 6:22am UTC](https://forum.kirupa.com/t/how-to-add-same-script-on-multiple-elements-with-same-classes/651987/4 "2022-06-13T06:22:55Z")

</div>

Hi Helena,

I had a look at what you had in `main.js` and what attributes were on the modal.  
You don’t have to use a part selector if you don’t want…

I had a play with the following and it seems to work (replaced the event listener in chrome).

In `main.js` replace this:

```auto

/*document.querySelector('.open-it').onclick = function () {
    document.querySelector('.modal').classList.add('show-modal');
};*/

/*var btns = document.getElementsByClassName("open-it");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function (e) {
            this.classList.toggle('show-modal');
            console.log('hi');
            e.preventDefault();
        });
    }*/
    var btns = document.getElementsByClassName("open-it");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function (e) {
            let modal = document.querySelector('.test')
            modal.classList.toggle('show-modal');
            console.log('hi');
            e.preventDefault();
        });
}

```

With this:

```auto
var btns = document.querySelectorAll(".open-it, .btn-modalclose");
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function (e) {
        let modal = document.querySelector('.modal')
        modal.classList.toggle('show-modal');
        e.preventDefault();
    });
}

```

---

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [June 15, 2022, 2:21am UTC](https://forum.kirupa.com/t/how-to-add-same-script-on-multiple-elements-with-same-classes/651987/5 "2022-06-15T02:21:06Z")

</div>

@steve.mills Thank you so much for your help 🙂  
It works perfectly !

Helena.