function parameter breaking JS defaults from EventListener

Question

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

Answer 1

It appears that you are passing the entire element to your subMenu function, so you wouldn't be able to call lastIndexOf or substr on the element itself.
If you ran those methods on a property of the element passed to your subMenu function, then it should work as you expect:

alert(e.href.substr(5));

or

alert(e.href.lastIndexOf("/"));

fiddle here: https://jsfiddle.net/25n1xbkc/

Answer 2

You can use .pathname to get last part of URL (and replace /):

  alert(e.pathname.replace("/",""));

here is good read don't that

And documentation on web location API

function subMenu(e) {
  alert(e.pathname.replace("/",""));
}

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>