0

I did this successfully for an element id; gave it the 'click' event listener so a modal can pop up once the action takes place. Now, I am trying with the same JS code but targeting a class instead of the id and nothing is popping up, the link just takes me to the site directly instead of making the modal appear.

It is worth saying that my id element is a navbar button, and my class element is just text with the <a href= element and class= "link-to-app". Here is the code for the navbar button, which is successfully running:

<script>
//Client Login: Redirect Modal
document.querySelector('.redirect-modal').style.display = 'none';
document.getElementById('btn-nav').addEventListener ('click', function() {
        document.querySelector ('.redirect-modal').style.display = 'flex';
        document.querySelector ("body").style.overflow = 'hidden';
});
        
//Redirect Modal: Close
document.querySelector('.close').addEventListener ('click', function() {
        document.querySelector ('.redirect-modal').style.display = 'none';
        document.querySelector ("body").style.overflow = 'visible';
});
</script>

Then, the code for the class element, which as I already said, is not working:

<script> 
document.getElementsByClassName('.link-to-app').addEventListener('click', function() {
        document.querySelector('.redirect-modal').style.display = 'flex';
        document.querySelector("body").style.overflow = 'hidden';
}) 
</script>

I don't know if using an array with the forEach method would help, and in such case, I don't know if I need to delete the code for the ID and include this one on the array along with the class. Any help would be great, I have tried multiple methods but nothing seems to work properly. Thank you in advance.

Dionisio
  • 9
  • 4

2 Answers2

0

document.querySelector() and document.getElementById() return a single node so it seems like that part of the code should work. But document.getElementsByClassName() returns an HTMLCollection which is not something you can directly call .addEventListener() on. You would need to iterate that collection to get each node in the list and then call node.addEventListener() on each one. You can use a for loop to iterate the nodeList.

FYI, you can see how to iterate the list here.

<script> 
const items = document.getElementsByClassName('.link-to-app');
for (let item of items) {
    item.addEventListener('click', function() {
        document.querySelector('.redirect-modal').style.display = 'flex';
        document.querySelector("body").style.overflow = 'hidden';
    }) 
}
</script>
jfriend00
  • 683,504
  • 96
  • 985
  • 979
0

I would do this way:

document.getElementsByClassName('link-to-app')[0].addEventListener('click', function(event) {

        event.preventDefault();
        document.querySelector('.redirect-modal').style.display = 'flex';
        document.querySelector("body").style.overflow = 'hidden';
});

Just because "getElementsByClassName" returns an array with all the elements matching that tag, i use [0] to refer to that element, only if there is one element with that tag, if there is more, you should do an iteration.

Lucio Segovia
  • 16
  • 1
  • How do I do the iteration? I am using that same tag for my navbar button and matching it through getElementByID. – Dionisio Apr 07 '22 at 02:42
  • You should remove the id and use the class method with all the elements that you want to trigger the modal. Must always use getElementsByClassName in that situacion and do an interate with foreach or for as you like: var elems = document.getElementsByClassName('.link-to-app'); foreach (elems as elem){ elem.addEventListener("click",function(){ document.querySelector('.redirect-modal').style.display = 'flex'; document.querySelector("body").style.overflow = 'hidden'; }); or even better, use jquery: $(".link-to-app").click(function(){ $(".redirect-modal").show(); };) – Lucio Segovia Apr 07 '22 at 20:13