ОТВЕТ 1) К тому моменту, когда вызывается функция, назначенная onclick, переменная i всегда равна e.childNodes.length
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="id4">
<div class="class1">1</div>
<div class="class1">2</div>
<div class="class1">3</div>
</div>
<script>
var e = document.getElementById("id4");
for(var i = 0; i < e.childNodes.length; i++){
if(e.childNodes[i].nodeType == 1){
e.childNodes[i].onclick = (function(el) {
return function() {
el.innerHTML += " *";
//alert("работает !!!");
};
})(e.childNodes[i]);
}
}
</script>
<style>body{font-size:300%;}.class1{background:gold;margin:1em auto;padding:1em;text-align:center;cursor:pointer;}</style>
</body>
</html>
ОТВЕТ 2) Человеческий цикл очень субъективен!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="id4">
<div class="class1">1</div>
<div class="class1">2</div>
<div class="class1">3</div>
</div>
<script>
document.getElementById("id4").addEventListener("click", function(event) {
if(!event.target.matches(".class1")) return;
event.target.textContent += " *";
});
</script>
<style>body{font-size:300%;}.class1{background:gold;margin:1em auto;padding:1em;text-align:center;cursor:pointer;}</style>
</body>
</html>
P. S. Ещё можно так
for(let element of document.querySelectorAll("#id4 .class1")) {}