How to add same script on multiple elements with same classes

programming web dev
1

Hi, Kirupa members. I need your help. :slightly_smiling_face:
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.

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/

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

2

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">

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();

        });

}
1 Like
3

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

Thank you very much in advance.

4

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:


/*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:

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();
    });
}
1 Like
5

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

Helena.

1 Like