why i can't replace the "for Each" with "for" loop?

Question

hey everyone(; i'm using "js" to create tabs in my html .
i guess i'm missing something, but i do not understand why i can't replace the forEach loop with for loop. this is my js:

var divsList = [];
var div = document.createElement("div");

function asTabs(container) {
    for (var i = 0; i < container.childNodes.length; i++) {
        var child = container.childNodes[i];
        if (child.nodeType === document.ELEMENT_NODE) {
            divsList.push(child);
        }
    }
    console.log(divsList);

    divsList.forEach(function (tab, i) {
        var button = document.createElement("button");
        button.textContent = divsList[i].getAttribute("data-tabname");
        button.addEventListener("click", function () {
            select(i);
        });
        div.appendChild(button);
    });
    container.insertBefore(div, container.firstChild);
}
/*for (var i = 0; i < divsList.length; i++) {
        var button = document.createElement("button");
        button.textContent = divsList[i].getAttribute("data-tabname");
        button.addEventListener("click", function () {
            select(i);
        });
        div.appendChild(button);
    }
    container.insertBefore(div, container.firstChild);
    console.log(container);
}*/

function select(n) {
    for (var i = 0; i < divsList.length; i++) {
        divsList[i].id = "Tab";
        if (n === i) {
            divsList[i].style.display = "";
            div.childNodes[i].style.background = "#FBFBFB";
        } else {
            divsList[i].style.display = "none";
            div.childNodes[i].style.background = "";
        }
    }
}
asTabs(document.querySelector("#wrapper"));
select(0);

and this is my html:

<div id="wrapper">
        <div data-tabname="one"><span>ONE</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in porta augue. Proin iaculis turpis eget orci commodo, id aliquam nisi eleifend. Nulla nec gravida nibh, sed dapibus lorem. Cras non tempus erat, sed </div>
        <div data-tabname="two"><span>TWO</span> Quisque pellentesque lacus sollicitudin arcu hendrerit euismod. Proin sed quam rutrum, dapibus dolor sed, blandit lorem. Quisque sed libero et eros vehicula lobortis. Mauris eleifend scelerisque mollis. Quisque mollis nibh dui, quis blandit ligul</div>
        <div data-tabname="three"><span>THREE</span> Sed lorem mi, pellentesque eget porta at, viverra at ex. Quisque viverra eu lorem a tempor. Donec ultrices ullamcorper elementum. Vivamus ut varius mauris. Suspendisse nisi 
        </div>
    </div>

the forEach work great. but as you can see I comment out the for loop because it's not work.The buttons are created nicely but the select function that executed by the EventListener does not work well with the for loop. here is the link to codepen:

Yes, of course you can substitute a "for()" loop. No, "for (...) {}` (the "for" keyword, loop syntax, and a code block) is *NOT* equivalent to "forEach(<>)". Look up [closures](https://www.w3schools.com/js/js_function_closures.asp). Specifically: "A closure is a function having access to the parent scope, even after the parent function has closed." — paulsm4, Jul 27 '17 at 00:32
You need to use `for` with `let` to create the same scope for `i` as the `forEach` does — Bergi, Jul 27 '17 at 01:42

why i can't replace the "for Each" with "for" loop?

0 Answers0