Interactive online courses HTML Academy
2026-03-09 12:22 Diff
https://htmlacademy.org/courses/javascript-basics/element-collections-properties/handler-in-loop

We used the for of loop to output all of the collection elements to the console. Add the click handler to all buttons in the news story using the same method. Use a loop: for every iteration add the handler that is now in the loop variable to the element. As a result we have a universal script – the handler is added to every element in the collection regardless of how many of them there are.

For example:

let elements = document.querySelectorAll('p'); for (let element of elements) { // Add a handler to all elements in order element.onclick = function () { console.log('You clicked on the paragraph!'); }; }

Note that there is no magical connection between the name of the array elements and the variable element that each successive array element is stored in; we could have called it x6hghjuhb97. We simply chose the name element because that’s what it is, and good coders make sure that their code is easy for another team member to read and understand.

When the loop from the example is executed, handlers will be added to all paragraphs in the elements collection, and when you click on each of them, a message will be displayed in the console.

An event handler that displays tooltips on the news site has already been written. Transfer it inside the loop and replace the index call with the tooltipButton variable, which we are using in the loop.

// Before: tooltipButtons[0].onclick = function () { ... }; // After: for (let tooltipButton of tooltipButtons) { tooltipButton.onclick = function () { ... }; }

The handler that we added to the second button will be removed. It is no longer needed. After that, make sure that when you click on each button a pop-up appears with a tooltip.