How does one loop through elements in pure JavaScript?

Question

I work for a small web development firm. I joined as an apprentice without a solid foundation in JavaScript. I am working through the courses here at Treehouse to improve my knowledge. That said, we use jQuery at work so I am now comfortable looping through elements with the .each() function like so:

$("nav a").each(function() {
  // jQuery here
});

I am currently working on a personal project to improve my knowledge of pure JavaScript loops. How would I accomplish the same thing as above? Here's my current code:

HTML:

<nav>
  <ul>
    <li><a href="#while">While Loops</a></li>
    <li><a href="#do-while">Do While Loops</a></li>
    <li><a href="#for">For Loops</a></li>
    <li><a href="#for-in">For In Loops</a></li>
  </ul>
</nav>

CSS:

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav a {
  display: block;
  padding: 15px;
  transition: color 0.3s;
}

nav a.selected,
nav a:hover {
  color: #000;
  transition: color 0.3s;
}

I want the currently selected navigation item to be black, as per the .selected rule. But because each of the navigation items links to a heading with an ID, and not a separate page (whereby I would have had separate HTML files and added the .selected class manually), I don't think the class can be added to them unless I add an event listener in JavaScript.

So basically, how can I loop through each of my navigation items, add an event listener for click, and then onclick, remove the .selected class from whichever element currently has it and add it to the one that's been clicked?

I hope this makes sense!

Answer 1 · 2018-01-06T15:50:17Z

January 6, 2018 3:50pm

//get all anchor elements
var navElements = document.querySelectorAll('a');
      //looping through each anchor element
      navElements.forEach(function(element){
           //adding click event on each anchor element
            element.addEventListener('click',function(e){
                 //stop default behaviour
                 e.preventDefault();
                 //select current active element
                 let active = document.querySelector('.selected');
                 active.classList.remove('selected'); //remove class  
                 this.classList.add('selected'); //add class to current click element
      });
});

Welcome to the Treehouse Community

Looking to learn something new?

Kieran Barker

Kieran Barker

How does one loop through elements in pure JavaScript?

1 Answer

William Warme

William Warme

Kieran Barker

Kieran Barker

Austin Whipple

Austin Whipple