title: Cannot convert traditional for loop to for-each loop
body: <p>For some inexplicable reason, I cannot convert this loop into a more natural <code>for (var player in fizzPlayers) { ... }</code> loop:</p>
  
  <pre><code>  for (var i = 0; i &lt; fizzPlayers.length; i++) {
      var player = fizzPlayers[i];
      var val = parseInt(player.value);
      if (val != 0) {
        active.push(player);
        actfact.push(parseInt(player.value));
        actname.push(capitaliseFirstLetter(player.id));
      }
    }
  </code></pre>
  
  <p>I want to write this the more natural for-each way, like this:</p>
  
  <pre><code>  for (var player in fizzPlayers) {
      var val = parseInt(player.value);
      if (val != 0) {
        active.push(player);
        actfact.push(parseInt(player.value));
        actname.push(capitaliseFirstLetter(player.id));
      }
    }
  </code></pre>
  
  <p>But it doesn't work, as you can see in the runnable code snippet at the bottom.</p>
  
  <p>For debugging, I inserted this code right before the loop:</p>
  
  <pre><code>  // prints undefined... but why?
    for (var player in fizzPlayers) {
      console.log(player.value);
    }
  </code></pre>
  
  <p>It prints <code>undefined</code> for the 5 players. Why? There is a similar loop earlier in the program where the <code>for (var player in fizzPlayers) { ... }</code> loop is working just fine.</p>
  
  <p>Why is this happening? What am I missing?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var fizzLoaded = false;
  var fizzDiv, fizzFrom, fizzTo, fizzPlayers;
  
  function fizzLoad() {
    if (fizzLoaded) {
      return;
    }
    fizzLoaded = true;
    var fizzForm = document.getElementById('fizzbuzz');
    fizzFrom = document.getElementById('rangeFrom');
    fizzTo = document.getElementById('rangeTo');
    fizzPlayers = [
      document.getElementById('frodo'),
      document.getElementById('sam'),
      document.getElementById('merry'),
      document.getElementById('pippin'),
      document.getElementById('bilbo')
    ];
    fizzDiv = document.getElementById('fizzOut');
  }
  
  function restrictRange() {
    var rFrom = parseInt(fizzFrom.value);
    var rTo = parseInt(fizzTo.value);
    fizzTo.min = rFrom;
    fizzFrom.max = rTo;
  }
  
  function validateValues() {
    var rFrom = parseInt(fizzFrom.value);
    var rTo = parseInt(fizzTo.value);
    if (rTo &lt; rFrom) {
      alert("Illegal range from " + rFrom + " to " + rTo);
      return false;
    }
    for (var player in fizzPlayers) {
      var val = parseInt(player.value);
      if (val &lt; 0 || val &gt; 100) {
        alert("Illegal value " + val + " for player " + player.id);
        return false;
      }
    }
    return true;
  }
  
  function capitaliseFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
  }
  
  function fizzing() {
    fizzLoad();
    restrictRange();
    if (!validateValues()) {
      fizzDiv.innerHTML = "Illegal inputs";
      return;
    }
  
    var table = "";
    var rFrom = parseInt(fizzFrom.value);
    var rTo = parseInt(fizzTo.value);
    var active = [];
    var actfact = [];
    var actname = [];
  
    // prints undefined... but why?
    for (var player in fizzPlayers) {
      console.log(player.value);
    }
  
    for (var player in fizzPlayers) {
      var val = parseInt(player.value);
      if (val != 0) {
        active.push(player);
        actfact.push(parseInt(player.value));
        actname.push(capitaliseFirstLetter(player.id));
      }
    }
  
    table += "&lt;table&gt;\n";
    table += "  &lt;tr&gt;&lt;th&gt;Value&lt;/th&gt;&lt;th&gt;Message&lt;/th&gt;&lt;/tr&gt;\n";
    for (var i = rFrom; i &lt;= rTo; i++) {
  
      var msg = "";
      for (var p = 0; p &lt; active.length; p++) {
        if (i % actfact[p] == 0) {
          msg += actname[p];
        }
      }
      if (msg == "") {
        msg = "" + i;
      }
      table += "  &lt;tr&gt;&lt;td&gt;" + i + "&lt;/td&gt;&lt;td&gt;" + msg + "&lt;/td&gt;&lt;/tr&gt;\n";
    }
    table += "&lt;/table&gt;\n";
  
    fizzDiv.innerHTML = table;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
      clear: left;
  }
  
  hr {
      clear: left;
  }
  
  label {
      display: inline-block;
      float: left;
      clear: left;
      width: 150px;
      text-align: left;
  }
  input {
    display: inline-block;
    float: right;
    text-align: right;
    padding-left:10px;
    width: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;FizzBuzz&lt;/title&gt;
      &lt;link rel="stylesheet" href="fizzbuzz.css"&gt;
      &lt;script src="fizzbuzz.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Config&lt;/h1&gt;
      &lt;form id="fizzbuzz"&gt;
        &lt;fieldset id="fizzControl" oninput="fizzing();"&gt;
          &lt;label&gt;Range From&lt;input id="rangeFrom" type="number" min="1" max="100" value="1" required&gt;&lt;/label&gt;
          &lt;label&gt;Range To&lt;input id="rangeTo"   type="number" min="1" max="1024" value="100" required&gt;&lt;/label&gt;
          &lt;div id="players" &gt;
            &lt;label&gt;Frodo&lt;input id="frodo" type="number" min="0" max="100" value="3" required&gt;&lt;/label&gt;
            &lt;label&gt;Sam&lt;input id="sam" type="number" min="0" max="100" value="5" required&gt;&lt;/label&gt;
            &lt;label&gt;Merry&lt;input id="merry" type="number" min="0" max="100" value="0" required&gt;&lt;/label&gt;
            &lt;label&gt;Pippin&lt;input id="pippin" type="number" min="0" max="100" value="0" required&gt;&lt;/label&gt;
            &lt;label&gt;Bilbo&lt;input id="bilbo" type="number" min="0" max="100" value="0" required&gt;&lt;/label&gt;
          &lt;/div&gt;
        &lt;/fieldset&gt;
      &lt;/form&gt;
      &lt;hr&gt;
      &lt;h1&gt;Output&lt;/h1&gt;
      &lt;div id="fizzOut" &gt;Change a value to get output (a snippet thing)&lt;/div&gt;
      &lt;script&gt;fizzing();&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>