function parameter breaking JS defaults from EventListener

February 5, 2022

I am attempting to make a rather basic navigation menu with JS elements (accordion styling).

I seem to have come to a stand still thought as the JS breaks

function subMenu(e) {
  alert(e);
}

function jsDetect() {
  var subs = document.getElementsByClassName('sub-nav');
  for (var i = 0; i < subs.length; ++i) {
    var item = subs[i];
    item.classList.add('hide');
  }
  const divs = document.querySelectorAll('.sub-link');
  divs.forEach(el => el.addEventListener('click', function(r) {
    r.preventDefault();
    subMenu(el);
  }), false);
}
window.onload = jsDetect;

ul.nav {
  text-transform: uppercase;
  background: rgba(0, 0, 0, 1);
  color: white;
}

ul.nav a:link {
  color: white;
  text-decoration: none;
  display: block;
  padding: 0.3em;
}

ul.nav,
ul.nav li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.nav li {
  padding: 0.55em;
}

.main-nav {
  font-weight: bold;
  font-family: 'Source Sans Pro Black', sans-serif;
  border-top: 1px solid white;
}

.sub-nav {
  background: rgba(255, 255, 255, 0.1);
}

.sub-nav a:hover {
  background: rgba(255, 255, 255, 0.3);
}

.sub-nav.hide {
  display: none;
}

.sub-nav.show {
  display: block
}

<ul class="nav">
  <li class="main-nav" id="home-nav"><a href="home">home</a></li>
  <li class="main-nav" id="articles-nav"><a href="food" class="sub-link">food</a></li>
  <li class="sub-nav articles-sub-nav hide"><a href="food/add">add</a></li>
  <li class="sub-nav articles-sub-nav hide"><a href="food/list">list</a></li>
  <li class="main-nav" id="articles-nav"><a href="articles" class="sub-link">articles</a></li>
  <li class="sub-nav articles-sub-nav hide"><a href="articles/add">add</a></li>
  <li class="sub-nav articles-sub-nav hide"><a href="articles/list">list</a></li>
  <li class="main-nav" id="assistance-nav"><a href="assistance">assistance</a></li>
</ul>

The above works fine, brings up the alert box which includes the whole url of the link clicked when it contains the class "sub-link"

But what I really need it to do is to let me know the last part of the the url eg "food" or "articles"

I thought by adding a combination of e.lastIndexOf(‘/’) and substr() to the subMenu function but I’m getting an error of

e.lastIndexOf is not a function

I’m very confused. All your help is greatly appreciated

>Solution :

You can get the last part of the link with

console.log(e.getAttribute("href"));

see here:

function subMenu(e){
    console.log(e.getAttribute("href"));
}

function jsDetect(){
    var subs = document.getElementsByClassName('sub-nav');
    for(var i = 0; i < subs.length; ++i) {
        var item = subs[i];
        item.classList.add('hide');
    }
    const divs = document.querySelectorAll('.sub-link');
    divs.forEach(el => el.addEventListener('click',function(r){r.preventDefault();subMenu(el);}),false);
}
window.onload = jsDetect;

ul.nav {text-transform: uppercase; background: rgba(0,0,0,1); color: white;}
ul.nav a:link {color: white; text-decoration: none; display: block; padding: 0.3em;}
ul.nav, ul.nav li {list-style-type: none; padding: 0; margin: 0;}
ul.nav li {padding: 0.55em;}
.main-nav {font-weight: bold; border-top: 1px solid white;}
.sub-nav {background: rgba(255,255,255,0.1);}
.sub-nav a:hover {background: rgba(255,255,255,0.3);}
.sub-nav.hide {display: none;}
.sub-nav.show {display: block}

<ul class="nav">
    <li class="main-nav" id="home-nav"><a href="home">home</a></li>
    <li class="main-nav" id="articles-nav"><a href="food" class="sub-link">food</a></li> 
    <li class="sub-nav articles-sub-nav"><a href="food/add">add</a></li>
    <li class="sub-nav articles-sub-nav"><a href="food/list">list</a></li>
    <li class="main-nav" id="articles-nav"><a href="articles" class="sub-link">articles</a></li> 
    <li class="sub-nav articles-sub-nav"><a href="articles/add">add</a></li>
    <li class="sub-nav articles-sub-nav"><a href="articles/list">list</a></li>
    <li class="main-nav" id="assistance-nav"><a href="assistance">assistance</a></li>
</ul>