How to get html input value in Javascript

Question

I have this Javascript code.

var navButton = document.getElementById("nav-button");
let outerlogouttrigger = false;
var email = document.getElementById("Email").value;
var password = document.getElementById("password").value;

document.getElementById("Login").onclick = function() {
  loginfunction()
};

function loginfunction() {
  sessionStorage.setItem('isLoggedin', 'true');

  //This is for making the changes instanteniously after clicking
  if (sessionStorage.getItem('isLoggedin') === 'true') {
    navButton.innerHTML = "Log out";
    navButton.classList.remove("btn-warning");
    navButton.classList.add("btn-success");
    outerlogouttrigger = !outerlogouttrigger; //not woring
  }
}
console.log(outerlogouttrigger);
console.log(email);
console.log(password);
// This if comes in effect after refresh
if (sessionStorage.getItem('isLoggedin') === 'true') {
  navButton.innerHTML = "Log out";
  navButton.classList.remove("btn-warning");
  navButton.classList.add("btn-success");
}

I have 2 questions:

How to change the outerlogouttrigger value which is not changing in my case.
how to get the value of the email and password which is taken input in a html form. The input type of email is email and input type of password is password. I want to check if they are empty or not!

You need to read the value of your form fields after the user has had a chance to actually input a value, not directly when the page loads … — CBroe, Sep 04 '20 at 11:27
Also please add relevant HTML to the snippet although the snippet will not actually run with sessionStorage statements — mplungjan, Sep 04 '20 at 11:29
Does this answer your question? [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — Ismail Farooq, Sep 04 '20 at 11:29
@CBroe Try using script tag in HTML file. that what you mean to say bro ? — Soumalya Bhattacharya, Sep 04 '20 at 11:33
@mplungjan lets try what CBroe suggested if it doesn't work I will give the HTML snippet — Soumalya Bhattacharya, Sep 04 '20 at 11:35
No, it is not. `var email = document.getElementById("Email").value;` executes right away in your script there, when that code is run. Did the user input a value into that field already at that time? If not, then you can’t expect to get anything but an empty string here. You should be reading those field values _inside_ of your `loginfunction`. — CBroe, Sep 04 '20 at 11:35
Also `document.getElementById("Login").addEventListener("click",loginfunction)` - no need to have a function assign a function to onclick — mplungjan, Sep 04 '20 at 11:36
@mplungjan I know but somehow it just looks easier for me. LOL! I just do it no reasons — Soumalya Bhattacharya, Sep 04 '20 at 11:50
@CBroe it worked! Can you please tell me how to toggle `outerlogouttrigger` to true. I keeps getting false in console.log() — Soumalya Bhattacharya, Sep 04 '20 at 11:52
If you reload the page, you need to store that var in the sessionStorage too — mplungjan, Sep 04 '20 at 11:52
@AlwaysHelping if it was false, then `outerlogouttrigger = !outerlogouttrigger` will work too but not across a reload — mplungjan, Sep 04 '20 at 11:53
correct! Just trying to be more clear with OP. @SoumalyaBhattacharya `console.log(outerlogouttrigger);` inside the click function to see it `true` — Always Helping, Sep 04 '20 at 11:54

score 0 · Accepted Answer · answered Sep 04 '20 at 12:01

Your code can be VASTLY simplified and that will help you find issues

let isLoggedIn = sessionStorage.getItem('isLoggedin') === 'true';

const setNav = () => {
  const navButton = document.getElementById("nav-button");
  navButton.innerHTML = isLoggedIn ? "Log out" : "Log in";
  navButton.classList.toggle("btn-success",isLoggedIn); // or use add/remove
  navButton.classList.toggle("btn-warning",!isLoggedIn); 
};
const loginfunction = () => {
  // you can even test the navButton text to see if they are loggin in or out here
  const email = document.getElementById("Email").value;
  const password = document.getElementById("password").value;
  if (email.trim() !== "" &&  password.trim() !== "") {
    // do whatever you need to do
    sessionStorage.setItem('isLoggedin', 'true');
  }  
};

window.addEventListener("load",function() { // on page load and all elements exist
  setNav();
  document.getElementById("Login").addEventListener("click",loginfunction);
})

Its been only 2 weeks I'm in javascript. I'm getting used to it — Soumalya Bhattacharya, Sep 04 '20 at 12:25

How to get html input value in Javascript

1 Answers1