Select Every One not just first

user_19656014 0
Viewed 51

I'm working on a custom java script variable for tag manager to track the navigation of my page. The script is only working for the very first element of the kind because of document.queryselect. document.queryselectAll is naturally not solving the problem. It would be great if you could help me:

function(){
   var elem = {{Click Element}};
   var menu = document.querySelector("ul.nav.meta-nav.justify-content-end");
   if(menu.contains(elem)){
     return "nav_header";
   };
var menu = document.querySelector("div.product-item");
   if(menu.contains(elem)){
     return "itemlist";
   };
var menu = document.querySelector("a.btn");
   if(menu.contains(elem)){
     return "cta_button";
   };
var menu = document.querySelector("footer.footer*");
   if(menu.contains(elem)){
     return "footer";
    }
   return "other";
}
google-tag-manager css-selectors javascript
2 Answers

Element.querySelectorAll() returns a NodeList. It's like an array. So a typical usage would be:

var elem = {{Click Element}};
document.querySelectorAll(selector).forEach(function(el) {
  if (el.contains(elem)) {
    return el.getAttribute("data-something");
  }
})
user_38073650 
function(){
  var elem = {{Click Element}};
  var type = "other"

  var selectors = {
    "ul.nav.meta-nav.justify-content-end" : "nav_header",
    "div.product-item" : "itemlist",
    "a.btn" : "cta_button",
    "footer.footer *"   : "footer"
  }

  for (const [key, value] of Object.entries(selectors)) {
    var domMenu = document.querySelector(key)
    if(domMenu && domMenu.contains(elem)){
       type = value
     };
  }

  return type;
}

Can not test from my end but it might work.

Just make sure the selectors is good and the click element should not fall into more than one selectors.

user_26926830
Related