title: XMLHttpRequest not working on button click
body: <p>I am developing this chrome extension and I have the backend on Django. I am doing an XMLHttpRequest POST to login the user. When I call the function on 'DOMContentLoaded', it works. However, when I do it on a button click, it doesn't work.</p>
  
  <p>Here is the javascript code:</p>
  
  <pre><code>function login(){
      //alert("hello");
      var http = new XMLHttpRequest();
      var url = "someURL";
      //var email = document.getElementById("email").value;
      //var password = document.getElementById("password").value;
      var params = "email=someEmail&amp;password=Password";
      //alert(params);
      //var params = "email=" + email + "&amp;password=" + password;
      http.open("POST", url, true);
      http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http.setRequestHeader("Content-length", params.length);
      http.setRequestHeader("Connection", "close");
      http.onreadystatechange = function() {
          //alert(http.responseText);
          if(http.readyState == 4 &amp;&amp; http.status == 200) {
              alert(http.responseText);
          }
      }
      http.send(params);
  }
  </code></pre>
  
  <p>Now, when I do this:</p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', function(){
      login();
  });
  </code></pre>
  
  <p>It works. On clicking the extension, I get a success message.</p>
  
  <p>However, when I do this:</p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', function(){
      document.getElementById("btn").addEventListener("click", login);
  });
  </code></pre>
  
  <p>It doesn't work.</p>
  
  <p>Here is the <code>popup.html</code>:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src="popup.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="content"&gt;
              &lt;p id="demo"&gt;&lt;/p&gt;
              &lt;form&gt;
                  &lt;input type="email" id="email"&gt;
                  &lt;input type="password" id="password"&gt;
                  &lt;button id="btn"&gt;Login&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and this is the <code>manifest.json</code></p>
  
  <pre><code>{
    "manifest_version": 2,
    "name": "payback",
    "description": "payback.",
    "version": "1.0",
    "content_scripts": [
      {
        "matches": ["http://*/", "https://*/"],
        "js": ["popup.js"]
      }
    ],
    "browser_action": {
      "default_popup":"popup.html"
    },
    "permissions": [
      "http://*/", "https://*/"
    ]
  }
  </code></pre>