title: How to change tag's inner html to the username?
body: <p>I am trying to change (div.class=loguser)'s innerhtml to the username that has logged in. To get the username, I wrote a function that gets input of username and password from the register_button which is inside (div#register). I wrote an object(addData) which takes the username and password and stores it in an array(datas). After putting it in the array, I made a function where it verifies if the username and password exists in the array. If it does exist, it is suppose the change the innerhtml to the username. But it is not working. And I cant even submit the form while registering.</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>let datas = [];
  const addData = (ev) =&gt; {
    ev.preventDefault();
    let data = {
      username: document.getElementById('rusername').value,
      password: document.getElementById('rpassword').value
    }
    datas.push(data);
    document.forms[0].reset();
  }
  document.addEventListener('DOMContentLoaded', () =&gt; {
    document.getElementById('register_button').addEventListener('click', addData);
  });
  
  function isUserValid(username, password) {
    var username = document.getElementById('lusername').value;
    var password = document.getElementById('lpassword').value;
    for (var i = 0; i &lt; datas.length; i++) {
      if (datas[i].username === username &amp;&amp;
        datas[i].password === password) {
        var name = username;
        document.getElementsByClassName('loguser').innerHTML = username;
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="loguser"&gt;
      &lt;td&gt;
        &lt;ul class="nav-area"&gt;
          &lt;li class="dropdown"&gt;&lt;a href="#"&gt;User&lt;/a&gt;
          &lt;/li&gt;
  
        &lt;/ul&gt;
      &lt;/td&gt;
    &lt;/div&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/div&gt;
  
    &lt;div class="wrapper"&gt;
  
      &lt;div class="login_box"&gt;
        &lt;div class="login_header"&gt;
          &lt;img src="images/alimama.png" alt=""&gt; &lt;br&gt; Login or Register!
        &lt;/div&gt;
  
        &lt;div id="login"&gt;
          &lt;form action="" method="POST"&gt;
            &lt;input id="lusername" type="text" name="lusername" placeholder="Username" required&gt;
            &lt;br&gt;
            &lt;input id="lpassword" type="password" name="lpassword" placeholder="Password"&gt;
            &lt;br&gt;
            &lt;input type="submit" name="login_button" value="Login"&gt;
            &lt;br&gt;
            &lt;a href="#" id="signup" class="signup"&gt;Need an account? Register here!&lt;/a&gt;
          &lt;/form&gt;
        &lt;/div&gt;
  
        &lt;div id="register"&gt;
          &lt;form action="" method="POST"&gt;
            &lt;input id="rusername" type="text" name="rusername" placeholder="Username" required&gt;
            &lt;br&gt;
            &lt;input id="rpassword" type="password" name="rpassword" placeholder="Password" required&gt;
            &lt;br&gt;
            &lt;input id="register_button" type="submit" name="register_button" value="Register"&gt;
            &lt;br&gt;
            &lt;a href="#" id="signin" class="signin"&gt;Already have an account? Sign in here!&lt;/a&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>