Is there DOM Element for this or something like that?

Issue

I'm a beginner and I have some issue with my HTML & JavaScript code. Mainly I want to send a notifications like "Logged in!" & "Fill in the remaining data".

Here's the HTML code:

<input type="email" id="emailToLogin" placeholder="Enter your email" />
<input type="password" id="passwordToLogin" placeholder="Enter your password"/>

 <button type="submit" id="log" onclick="notification(emailInput, passwordInput)">
 <p>
    Log in
 </p>
</button>
<h1 id="successful"></h1>
<h1 id="unsuccessful"></h1> 

JavaScript code:

let emailInput = document.getElementById("emailToLogin");
let passwordInput = document.getElementById("passwordToLogin");

function notification(emailInput, passwordInput) {
    if (emailInput ==  "" || passwordInput == "") {
        document.getElementById("unsuccessful").innerHTML = "Please enter the remaining data!";
    }

}

To be more specific, I want to do this in JavaScript, no matter what. I have a code for redirection to the main site of this little project, but I think it's not important.

I already tried to change "" to undefined or null, and it didn't work.

Solution

This isn't doing what you think it is:

if (emailInput ==  "" || passwordInput == "") {

If you were to console.log(emailInput) (and/or passwordInput) you'll see that these are not string values, they are entire DOM elements. Which you queried from the DOM here:

let emailInput = document.getElementById("emailToLogin");
let passwordInput = document.getElementById("passwordToLogin");

To compare their values, you need to read the values from the elements:

if (emailInput.value ==  "" || passwordInput.value == "") {

---

Additionally, I suspect you're very close to confusing yourself with multiple variables of the same name. You define these globally:

let emailInput = document.getElementById("emailToLogin");
let passwordInput = document.getElementById("passwordToLogin");

And then shadow them with local variables here:

function notification(emailInput, passwordInput) {

This coincidentally works because you happen to be passing those global variables to the function:

onclick="notification(emailInput, passwordInput)"

But this is a bug waiting to happen. Keep the intent clear. You could use a different name for the local variables, and expect the values instead of the entire elements:

function notification(email, password) {
  if (email ==  "" || password == "") {
    document.getElementById("unsuccessful").innerHTML = "Please enter the remaining data!";
  }
}

Then pass those values:

onclick="notification(emailInput.value, passwordInput.value)"

Or perhaps just rely on the global variables and not use function arguments at all:

function notification() {
  if (emailInput.value ==  "" || passwordInput.value == "") {
    document.getElementById("unsuccessful").innerHTML = "Please enter the remaining data!";
  }
}

And of course remove the arguments from the function call:

onclick="notification()"

It's really up to you which approach you'd prefer.

Answered By - David