Having trouble selecting the anchor link in the DOM that is a direct child of my list item "dropdown-nav". I want it to change when the list item is clicked, but it's not working. The active class is being applied correctly. What could be the issue here?
var acc = document.getElementsByClassName("dropdown-nav");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active-hit");
this.find("a").attr("href", "http://www.google.com/");
});
}<ul>
<li class="dropdown-nav">
<a href="/about">About
<span class="nav-desc">Our company</span>
</a>
<div class="hide-border"></div>
<ul class="second-tier">
<div class="hide-corner"></div>
<li><a href="#">Our Mission</a></li>
<li><a href="#">Our People</a></li>
<li><a href="#">Work with us</a></li>
<li><a href="#">High Value Manufacturing</a></li>
</ul>
</li>
</ul>