Javascript document event on certain css class

Question

I'm used to writing in jQuery for selecting by class, however the following I can't quite get the code right. This lives on every page and should just intercept links with the class 'download-link'. The following works for all links. But i want to target it just for download-link css.

 document.onclick = function (e) {
                e = e ||  window.event;
                var element = e.target || e.srcElement;

                if (element.tagName == 'A') {
                    window.open(element.href, "_blank", "location=yes,toolbar=yes,toolbarposition=top");
                    return false; 
                }

            };

I can't quite work out the selector for my if statement to change element.tagName to be element.class or similar.

Heres the last thing I tried

 document.getElementById("download-link").addEventListener("click", function(e) {
        window.open(e.href, "_blank", "location=yes,toolbar=yes,toolbarposition=top");
return false;
        e.preventDefault();
    });

getElementById does not get the elements with the class download-link. it gets the element with the id. If you want to get the elements with a certain class, you need to use document.getElementsByClassName. — litelite
– litelite, Commented Aug 18, 2017 at 15:23
if (element.tagName == 'A' && element.classList.contains('download-link')) { source — James Douglas
– James Douglas, Commented Aug 18, 2017 at 15:26

guest271314 · Accepted Answer · 2017-08-18 15:47:22Z

4

You mention

should just intercept links with the class 'download-link'

though use .getElementById(). You can use .querySelectorAll() with selector ".download-link" and NodeList.prototype.forEach() to perform a task, see forEach method of Node.childNodes?. For example, attach an event listener, to each ".download-link" element

document.querySelectorAll(".download-link")
.forEach(function(element) {
  element.addEventListener("click", function(event) {
  // do stuff
  })
})

If NodeList.prototype.forEach() is not defined at browser you can use for loop to achieve same result

for (var i = 0, nodes = document.querySelectorAll(".download-link");
      nodes && i < nodes.length; i++) {
        nodes[i].addEventListener("click", function(event) {
        // do stuff
        })
}

edited Aug 18, 2017 at 15:47

answered Aug 18, 2017 at 15:25

guest271314

1

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

4 Comments

James Douglas Over a year ago

Please edit your answer to make it more clear what the OP did wrong, and how to fix it.

guest271314 Over a year ago

@JamesDouglas The original Answer did mention what was incorrect, and provided code for how to correct the issue. Updated post for further clarity nonetheless

MissCoder87 Over a year ago

Thank you - however It doesn't seem to be selecting for me on this code

guest271314 Over a year ago

@TMB87 What do you mean by "doesn't seem to be selecting"? At which browser are you trying code?

Collectives™ on Stack Overflow

Javascript document event on certain css class

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related