title: I/O addEventListener does not start
body: <p>On my page, I have an input field that accepts an integer-input and the JavaScript function calculates the values and outputs in 2 different other boxes. This is a basic "Fizz Buzz" I/O project. </p>
  
  <p>I built everything around the exact code (JS) and architecture (HTML) from another project that works fine. In this code, however, entering the integer does not start any calculations. Also the console.logs() are never written. My code is provided below...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var init = 0;
  
  document.getElementById("intArr").addEventListener('input',
  function(e) {
      init = e.target.value;
  
      var arr = new Array(init);
  
      for (i = 0; i &lt;= arr.length - 1; i++) {
  
          arr[i] = i + 1;
  
          if (arr[i] % 3 === 0) {
              console.log('Fizz' + arr[i]);
              // document.getElementById('Fizz').innerHTML=arr[i];
          }
          if (arr[i] % 5 === 0) {
              console.log('Buzz' + arr[i]);
              // document.getElementById('Buzz').innerHTML=arr[i];
          }
          if (arr[i] % 3 === 0 &amp;&amp; arr[i] % 5 === 0) {
              console.log('Fizz-Buzz' + arr[i]);
              // 
              document.getElementById('fizzBuzz').innerHTML = arr[i];
          }
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
      &lt;div class="form-group"&gt;
          &lt;input id="intArr" type="number" class="form-control form-control-md" placeholder="Enter Integer for Array"&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
  
          &lt;div class="col-sm"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Fizz&lt;/label&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-block"&gt;
                          &lt;div id="Fizz"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-sm"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Buzz&lt;/label&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-block"&gt;
                          &lt;div id="Buzz"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-sm"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Fizz-Buzz&lt;/label&gt;
  
                  &lt;div class="card"&gt;
                      &lt;div class="card-block"&gt;
                          &lt;div id="fizzBuzz"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>