(function IIFE() {
'use strict';
var buttons = document.getElementsByTagName('button');
for (let i = 0, l = buttons.length; i <= l; i += 1) {
buttons[i].onclick = function () {
for (let i = 0; i <= l; i += 1) {
buttons[i].className = '';
this.className = 'active';
}
};
}
// just for testing purpose
for (var k = 0; k <= 10; k +=1){
alert(k);
}
}());<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test UI</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<ul>
<li><button class="active">A</button></li>
<li><button>B</button></li>
<li><button>C</button></li>
</ul>
<script src="script.js"></script>
</body>
</html>https://i.sstatic.net/H8uAc.png
I was surprised to see that the alert() function wasn't working as expected. At first, I thought everything was fine because it seemed to be functioning correctly.
Now I'm puzzled about why buttons[i] is returning undefined.
This code makes use of ES6.
Thank you for your assistance