How Do I Store The User Input From The HTML form element to Javascript Variables?

i cant seem to figure out why the input isnt storing in the variables. I’ve tried searching for a few days but found nothing so im asking here can somebody please help.

my code:

function openForm() {
  document.getElementById("myForm").style.display = "block";
  document.getElementById("profile").style.display = "none";
  document.getElementById("usernametxt").style.display = "none";
}

function closeForm() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  console.log(input);
  document.getElementById("myForm").style.display = "none";
  document.getElementById("Login").style.display = "none";
  document.getElementById("profile").style.display = "block";
  document.getElementById("usernametxt").style.display = "block";

  alert(username);
  alert(password);
}

<div>
  <button class="open-button" onclick="openForm()" id="Login">Log In</button>

  <!-- The form -->
  <div class="form-popup" id="myForm">
    <form class="form-container" onsubmit="return false;">
      <h1>Login</h1>

      <label for="username"><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="username" id="username" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" id="password" required>

      <button type="submit" class="btn">Login</button>
      <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
    </form>
  </div>
</div>

Answer

I hope this will help you:

<div>
  <button class="open-button" onclick="openForm()" id="Login">
    Log In
  </button>

  <!-- The form -->
  <div class="form-popup" id="myForm">
    <form class="form-container" onsubmit="return false;">
      <h1>Login</h1>

      <label for="username"><b>Username</b></label>
      <input
        type="text"
        placeholder="Enter Username"
        name="username"
        id="username"
        required
      />

      <label for="psw"><b>Password</b></label>
      <input
        type="password"
        placeholder="Enter Password"
        name="psw"
        id="password"
        required
      />

      <button type="submit" class="btn">Login</button>
      <button type="button" class="btn cancel" onclick="closeForm()">
        Close
      </button>
    </form>
  </div>
</div>

js:

    function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("profile").style.display = "none";
    document.getElementById("usernametxt").style.display = "none";
  }
  
  function closeForm() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    document.getElementById("myForm").style.display = "none";
    document.getElementById("Login").style.display = "none";
    // document.getElementById("profile").style.display = "block";
    // document.getElementById("usernametxt").style.display = "block";
    alert(username);
    alert(password);
    console.log(username,password) // if you want to see store value in console
  }