title: Why can I not clear the interval?
body: <p>I don't understand why <code>clearInterval</code> is not working for me. In the interval I display a 2D array in a table format and then update the array, and repeat over and over. </p>
  
  <p>Why is <code>clearInterval</code> not working?</p>
  
  <p>JavaScript in head:</p>
  
  <pre><code>$(window).load(function () {
      var tabl = document.getElementById('ordersTable');
      var l = tabl.rows.length;
      var w = tabl.rows[0].cells.length;
      alert("Width:" + w);
      var array1 = new Array(l);
      var array2 = new Array(l);
      initialize();
      alert(JSON.stringify(array1));
      var st = setInterval(function () {
          display(array1);
          newArray();
          //alert(JSON.stringify(array1));
      }, 3000);
  
      function stopTime() {
          clearInterval(st);
      }
  
      function display(array) {
          for (var i = 0; i &lt; l; i++) {
              for (var j = 0; j &lt; w; j++) {
                  var tr = tabl.rows[i];
                  var cll = tr.cells[j];
                  var ct = cll.innerHTML = array[i][j];
                  if (array[i][j] == 1) {
                      $(cll).css("color", "red");
                  } else {
                      $(cll).css("color", "black");
                  }
                  cll.id = array1[i][j];
              }
          }
      }
  
      function initialize() {
          for (var i = 0; i &lt; l; i++) {
              array1[i] = new Array(w);
              array2[i] = new Array(w);
              for (var j = 0; j &lt; w; j++) {
                  var rand = Math.floor(Math.random() * 2);
                  array1[i][j] = rand;
              }
          }
      }
  
      function newArray() {
          for (var i = 0; i &lt; l; i++) {
              for (var j = 0; j &lt; w; j++) {
                  var rand = Math.floor(Math.random() * 2);
                  array1[i][j] = rand;
              }
          }
      }
  });
  </code></pre>
  
  <p>HTML in body:</p>
  
  <pre><code>&lt;table id="ordersTable"&gt;
      &lt;tr&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;td&gt; Row 1.2&lt;/td&gt;&lt;td&gt;Row 1.3&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;td&gt; Row 2.2&lt;/td&gt;&lt;td&gt;Row 2.3 &lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;td&gt; Row 3.2 &lt;/td&gt;&lt;td&gt;Row 3.3&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;button onclick="stopTime()"&gt;Stop&lt;/button&gt;
  </code></pre>