title: Button onclick event in Javascript does not trigger alerts
body: <p>I'm trying to make a simple register/login system but when I press the button for both, it doesn't do what I need it to do. </p>
  
  <p>I put</p>
  
  <pre><code>alert("I work!");
  </code></pre>
  
  <p>at the beginning of each function supposed to work to see if it actually gets triggered but it doesn't. I also checked if the onclick events for both are referenced correctly and they are. I even tried to copy the actual scripts into the html file to ensure that it's not a reference issue. At this point, I'm really stuck, and if this is some syntax error, it doesn't alert me and I'm not aware of any.</p>
  
  <p>The codes are:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Opportunities&lt;/title&gt;
          &lt;script type="text/javascript" src="jquery-3.3.1.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/js/script.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p&gt;Uwu&lt;/p&gt;
  
          &lt;form&gt;
              &lt;p&gt;Username &lt;input type="text" class="username" /&gt;&lt;/p&gt;
              &lt;p&gt;Password &lt;input type="password" class="password" /&gt;&lt;/p&gt;
              &lt;button onclick="loginUser()"&gt;Login&lt;/button&gt;
          &lt;/form&gt;
  
          &lt;p&gt;Not yet registered? &lt;a href="/register"&gt;Click here to create an account.&lt;/a&gt; &lt;/p&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>registration.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Register&lt;/title&gt;
          &lt;script type="text/javascript" src="jquery-3.3.1.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src=/js/script.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p&gt;Registration page&lt;/p&gt;
  
          &lt;form&gt;
              &lt;p&gt;Username &lt;input type="text" class="username" /&gt;&lt;/p&gt;
              &lt;p&gt;Password &lt;input type="password" class="password" /&gt;&lt;/p&gt;
              &lt;button onclick="registerUser()"&gt;Register&lt;/button&gt;
              &lt;!--onclick event doesn't work--&gt;
          &lt;/form&gt;
  
          &lt;p&gt;&lt;a href="/"&gt;Click here to go back.&lt;/a&gt;&lt;/p&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and script.js:</p>
  
  <pre><code>var url = "http://localhost:8888";
  
  function test(){
      console.log('hello');
  }
  
  function registerUser(){
      alert("I work!");
      var username = document.getElementbyClassName("username");
      var password = document.getElementbyClassName("password");
  
      $.ajax{(
          url: url + "/register",
          method: "post",
          data: {
              username: username[0].value,
              password: password[0].value
          }
          success: function(respons){
              alert(response.message);
          }
      }).error(function(response){
          alert(response.message);
      });
  }
  
  function loginUser(){
      alert("I work!");
      var username = document.getElementbyClassName("username");
      var password = document.getElementbyClassName("password");
  
      $.ajax({
          url: url + "/login",
          method: "post",
          data: {
              username: username[0].value,
              password: password[0].value
          }
      }).success(function(response){
          alert(response.message);
      }).error(function(response){
          alert(response.message);
      });
  }
  </code></pre>
  
  <p>Whenever I press the buttons for each, it just clears the texts in my inputs but doesn't launch an alert like I intend to. Please do tell me what I should check regarding this. Thank you.</p>