How to call javascript function on all elements with the same classname

Question

I am trying to get a pop-up window to display when a user clicks on an element on my page. I have all the functionality for the pop-up working correctly; however, I am having trouble getting the function to pop-up for every element that matches the specified classname. My code is below:

<script>

        function descPop () {

            // Description pop-up 
        // Get the modal
        var modalprod = document.getElementById('myModalTwo');

        // Get the button that opens the modal
        var btnprod = document.getElementsByClassName("add-but")[0];

        // Get the <span> element that closes the modal
        var spanprod = document.getElementsByClassName("prod-close")[0];

        // When the user clicks on the button, open the modal 
        btnprod.onclick = function() {
            modalprod.style.display = "block";
        }

        // When the user clicks on <span> (x), close the modal
        spanprod.onclick = function() {
            modalprod.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modalprod) {
                modalprod.style.display = "none";
            }
        }   
    }

    </script>

Now, I know that currently this code is assigning index 0 to var btnprod; therefore, it will only pop-up when you click on the first element which matches the classname "add-but". How do I assign and access all elements, so that every tag with the classname "add-but" will pop-up the window?

Thanks

Solution:

function descPop () {

            // Description pop-up 
        // Get the modal
        var modalprod = document.getElementById('myModalTwo');

        // Get the button that opens the modal
        var btnprod = document.getElementsByClassName("add-but");

        // Get the <span> element that closes the modal
        var spanprod = document.getElementsByClassName("prod-close");

        // When the user clicks on the button, open the modal 
        for (var i = 0; i < btnprod.length; i++) {
            btnprod[i].onclick = function() {
                modalprod.style.display = "block";
            }
        }

        // When the user clicks on <span> (x), close the modal
        for (var i = 0; i < spanprod.length; i++) {
            spanprod[i].onclick = function() {
                modalprod.style.display = "none";
            }
        }


        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modalprod) {
                modalprod.style.display = "none";
            }
        }   
    }

var $btnprod = $(".add-but") and bind an event like $btnProd.on("click", function() {// YOUR CODE})l ...................... USe jquery to do it — Kiran Shinde
– Kiran Shinde, Commented Dec 14, 2016 at 8:27
Your code javascript but you tagged jquery, try jquery which makes life easier — asdf_enel_hak
– asdf_enel_hak, Commented Dec 14, 2016 at 8:28

Ovidiu Dolha · Accepted Answer · 2016-12-14 08:29:54Z

5

If Jquery is not an option, you could iterate over the HtmlCollection to do it:

var btnprod = document.getElementsByClassName("add-but"); // <- this gives you  a HTMLCollection 
for (var i = 0; i < btnprod.length; i++) {
    btnprod[i].onclick = function() {
        modalprod.style.display = "block";
    }
}

answered Dec 14, 2016 at 8:29

Ovidiu Dolha

5,4132 gold badges24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

basil3 Over a year ago

This worked perfectly... cheers :) I will add to the question.

iHasCodeForU · Accepted Answer · 2016-12-14 08:35:09Z

1

you can change your code to the following:

$('.add-but').on('click', function() {
  $(this).css('display', "none");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-but">
  fafafafafa
</div>
<br>
<div>
  fafafaffafafaafafa
</div>
<br>
<div class="add-but">
  fafafafafafafaafafafaffafa
</div>

note that i have changed the display to none instead of block for this example.

this uses the jQuery selectors, event binding and css function.

answered Dec 14, 2016 at 8:35

iHasCodeForU

1771 silver badge11 bronze badges

Comments

Remy Mellet · Accepted Answer · 2021-01-22 13:10:28Z

1

I'd prefer that sexier solution:

document.getElementsByName('add-but').forEach(btn => {
    btn.onclick = (e) => {
        btn.style.display = "block"
    }
});

Same in one line:

document.getElementsByName('add-but').forEach(btn => btn.onclick = (e) => btn.style.display = "block" );

If you want have multiples clicks events on same btn:

document.getElementsByName('add-but').forEach(btn => btn.addEventListener('click', e => btn.style.display = "block" ));

answered Jan 22, 2021 at 13:10

Remy Mellet

1,80522 silver badges25 bronze badges

Comments

Niall Walker · Accepted Answer · 2016-12-14 08:41:02Z

0

You've added a jquery tag but there's no jquery here. With jquery you can just write:

$('.classname').on ('click', function () {
    //activate modal
});

Alternatively, you can add them to a variable as a collection, referencing this variable will apply to any element with this class.

var x = $('.classname');

edited Dec 14, 2016 at 8:41

answered Dec 14, 2016 at 8:29

Niall Walker

1952 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to call javascript function on all elements with the same classname

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related