CODEWITHSUNDEEP
javascriptjqueryhtml
basil3
basil3

Reputation: 59

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

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

Upvotes: 2

Views: 5029

Answers (4)

Remy Mellet
Remy Mellet

Reputation: 1795

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

Upvotes: 1

Niall Walker
Niall Walker

Reputation: 175

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

Upvotes: 0

iHasCodeForU
iHasCodeForU

Reputation: 177

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.

Upvotes: 1

Ovidiu Dolha
Ovidiu Dolha

Reputation: 5413

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

Upvotes: 5

Related Questions