title: event listener does not work
body: <p>Any ideas why this does not work.</p>
  
  <p>The Yes button when clicked works once - the No button does not work</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>function $(x) {
      return document.getElementById(x);
  }
  
  var glob = 0;
  
  function new_index() {
      glob += 1;
      return "d" + glob;
  }
  
  function play() {
      say("Hello is JS Fun?");
      response("No",
          function() {
              say("Oh dear")
          });
      response("Yes",
          function() {
              say("Great:");
          });
  }
  
  function say(x) {
      $("txt").innerHTML += x;
  }
  
  function response(Txt, Fun) {
      var n = new_index();
      var s = "&lt;button id='" + n + "'&gt;" + Txt + "&lt;/button&gt;";
      say(s);
      var xx = $(n);
      // xx.onclick=Fun;
      xx.addEventListener("click", Fun);
  }
  
  play();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="txt"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>