There are many JavaScript courses here and, perhaps, it may be essential to look into some of the courses which go over more of the fundamentals. It's okay to do this and come back to a course when you have developed a more solid foundation of concepts and techniques. Most of us have done that. I know I have where I have jumped into a course that was little over my head and I had to find another to build my skills and understanding required for the original course I chose.

Feel free to try different courses as the system will remember where you left off. I frequently bounce between different courses and even categories of courses.

https://teamtreehouse.com/library/-javascript-quickstart is a new course which should get you up to speed on loops and such.

You can find more information about JavaScript and accessing parts of a webpage (the DOM) with this course - https://teamtreehouse.com/library/javascript-and-the-dom-2

The more you get into JavaScript development, the following should be your go-to resource when you want to find more information - https://developer.mozilla.org/en-US/docs/Web/JavaScript -- Use the Search on the top right.

I hope this helps and encourages you to research and ask questions you have on your journey into a JavaScript developer. It's not always easy, but if you have a passion for it you'll succeed.

Keep calm and code on.

I understand the frustration but part of learning to program, is the experimentation and exploration of the language by yourself. It's near-impossible to cover every detail and combination of programming concepts.

This particular video course is only intended to explain the usage of let and const in ES6, there wasn't a need for Andrew to explain what an event listener or what document.getElementsByTagName is. There is an assumption that the person watching the video has adequate knowledge of the language before moving onto the new features in ES6.

Answer to your question.

As JavaScript is a programming language intended for Web Applications, you will quite often need to access bits of HTML so you can modify them or update them in one way or another. There's a few different ways of doing this, which each reference the 'Document'. The Document refers to the HTML document used to render the page.

document.getElementsbyTagName will return all elements in the HTML file which match the tag name (i.e button, p, h1, div etc.) across the entire document.

In the example 'button' was a const variable that contained an array of elements retrieved by the method mentioned above. The 'for' loop is interating through that array of buttons, and for each one, adding an event listener.

An event listener is a way the browser can detect when a user does something, or when something happens to the page. This could be clicking, or pressing a specific key. In this particular instance, an event listener for clicks is added to each button, and the code that follows is executed; in this example it's an alert dialog which tells you which button was pressed.

Hope that helps! Keep calm and code on! :)

I love this site as far as the tuturials go but their courses are so out of order it confuses people. All of that stuff is in the next course, manipulating the DOM.

ok so it seems a little confusing at first but take some time breaking it into pieces.

const buttons = document.getElementsByTagName("button");

this stores all the buttons as a collection into const buttons. The collection works almost like an array, it has index positions. so buttons[0] would be button 0 and buttons[5] would be button 5.

for(var i = 0; i < buttons.length; i++) {
          const button = buttons[i];

the next bit loops over this collection and because we used "const" to declare the variable it is local to the function, so each loop has its own button variable. so first loop button = const[0] which is button 0 second loop button = const[1] which is button 1 and so on.

button.addEventListener("click", function() {
              alert("Button " + i + " Pressed");
          });

the second bit of the for loop takes each of those individual const button's and adds an event listener which basically says if someone clicks on 0 give us an alert for button 0 second round through the loop says const button= button[1] give us an alert for button 1 third button it adds the same thing again if someone clicks const button = button[2] give us the alert for button 2.

all that this exercise is showing is that when you use var in the for loop like this

for(var i = 0; i < buttons.length; i++)

var is a global which is the same as doing this

var i=0
for(i=0 ;i<buttons.length;i++){
     //code to run
}

which means each loop the buttons are all sharing one variable i. var i is updated and over 10 loops var i = 10 which is why you always get 10 .

instead if you use let its like every loop has its own independant variable i. So each button gets its own copy of i so button 1 has a variable i with the value of 1. and button 5 has its own i variable with a value of 5.

for(let i = 0;i<buttons.length;i++);

I disagree that the courses are "so out of order". The tracks are built to expose you to the fundamentals of a programming language like JavaScript. Ideally one takes a track to develop a foundational understanding and then starts to explore those courses that don't have a place in a particular track. This particular course is in fact the 5th track in the JavaScript Full Stack JavaScript track. I recommend trying it out.

NOTE: The instructor explicitly mentions the courses that should be taken before taking this course in the first video. There are also links in the teacher's notes.