For-Each Loops

This JavaScript program demonstrates the usage of a for-each loop.

ForEach.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's Javascript - For Each Loop</title>
    <script type="text/javascript" src="ForEach.js"></script>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>

ForEach.js

function Insert(qCurrValue, iCurrIndex, qaArray) {
  // Note that: qCurrValue = qaArray[iCurrIndex]
  this[iCurrIndex].innerHTML = qaArray[iCurrIndex];
}

function SetElements() {
  // The zero index is the first and only "ul" element
  var qpUL = document.getElementsByTagName("ul")[0];
  var qaTribesOfIsrael = ["Reuben", "Simeon", "Levi", "Judah", "Issachar",
    "Zebulun", "Dan", "Naphtali", "Gad", "Asher", "Joseph", "Benjamin"];
  // children is an HTMLCollection, but it is capable of being indexed like an array.
  qaTribesOfIsrael.forEach(Insert, qpUL.children);
}

window.onload = SetElements;

Core JavaScript

For-Each Loops

ForEach.html

ForEach.js

Output