title: Broken closure - please help me fix it
body: <p>in a <a href="https://stackoverflow.com/questions/4584397/javascript-countdown-clock/4584501">related question</a> I have posted this code. It almost works, but the counter doesn't.</p>
  
  <p>Can we fix it? (no jQuery, please)</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var intervals = [];
  var counters = {
    "shoes":{"id":"shoe1","minutes":1,"seconds":5},
    "trousers":{"id":"trouser1","minutes":10,"seconds":0}
  }; // generate this on the server and note there is no comma after the last item
  window.onload = function() {
    for (var el in counters) { countdown(counters[el]) };
  }
  
  function countdown(element) {
      intervals[element.id] = setInterval(function() {
          var el = document.getElementById(element.id);
          var minutes = element.minutes;
          var seconds = element.seconds;
          if(seconds == 0) {
              if(minutes == 0) {
                  el.innerHTML = "countdown's over!";                    
                  clearInterval(intervals[element.id]);
                  return;
              } else {
                  minutes--;
                  seconds = 60;
              }
          }
          if(minutes &gt; 0) {
              var minute_text = minutes + (minutes &gt; 1 ? ' minutes' : ' minute');
          } else {
              var minute_text = '';
          }
          var second_text = seconds &gt; 1 ? 'seconds' : 'second';
          el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
          seconds--;
      }, 1000);
  }
  &lt;/script&gt;
  shoes: &lt;span id="shoe1"&gt;&lt;/span&gt;&lt;br /&gt;
  trousers: &lt;span id="trouser1"&gt;&lt;/span&gt;&lt;br /&gt;
  </code></pre>