understanding what goes in a function

Question

So I'm trying to learn proper vanilla javascript Instead of relying on frameworks and libraries to do the work for me. The question is: I'm trying to understand what goes into a function when, where and how.

E.G. I created some links and a function that has a loop inside that counts the links and should return the number of links and their names. But all I keep getting back is the number of (a) tags.

Can some explain how I get the links names as I've tried innerHTML and the (a) tag. from my understanding and looking at the DOM list I should be able to dig down in the elements to get what I need. I'm assuming I'm just coding it wrong.

var links = document.getElementsByTagName('a');
    
function loopLinks(links) {
  for (i = links; i < links.length; i++);
  return a.innerHTML;
}

console.log(links);

    <ul>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
     <li><a href="#">Link 4</a></li>
     <li><a href="#">Link 5</a></li>
     <li><a href="#">Link 6</a></li>
     <li><a href="#">Link 7</a></li>
    </ul>

Answer 1

The earlier posters are correct that your code has some basic structural problems. I've rewritten it to do what I understand you want to do, with comments explaining what is happening at each step.

I think one of the basic things you might be misunderstanding is the difference between defining a function and invoking a function. I've tried to demonstrate that in the comments.

There are many other ways to do this in JavaScript, but this approach is a simple EcmaScript 5 style solution:

// this command gets an array of links from the DOM
var links = document.getElementsByTagName('a');

// to get the NUMBER of links, just log the length of the array
console.log('Number of links:', links.length);

// here you DEFINE a function that loops over the links.
function loopLinks(links) {     
    // You want to loop over the indicies in the "links" array
    for (let i = 0; i < links.length; i++){
        // get a reference to the link
        let a = links[i];
        // log out the name of each link
        console.log(a.innerHTML);
    }
}

// here, you actually INVOKE(call) the function that loops over the links.
// INVOKING the function makes it run, and outputs your link names. 
loopLinks(links);

Best of luck with your foray in to programming. Don't give up.