if statement in function working before the variables are even given a value

I am working on a HTML, CSS,and Javascript document. I have created this:

let email = ''
let password = ''

function loginInfo() {
  email = document.getElementById('forma').value
  password = document.getElementById('forma').value
  setTimeout(5)
  if (password === '123') and (email==='[email protected]'); {
    console.log('succesful')
  }
}
setTimeout(5)
loginInfo()

When I run the program the console.log('succesful') runs no matter what, before I even type anything into the forms. Why wouldn't declaring the two variables at the top, email and password make it that the if statement if false and the code doesn't go through?

I tried adding the timeouts to delay this, and originally I thought all the problem was that I wasn't setting the variables as blank right away. It should be noted that when I first ran the program it did run any code in the if statement before I put data into the forms, but everytime after that it's continued to do it before. I even tried deleting the code, running, and putting it back but the problem still persists.

New: HTML Code -

<form id="forma" action="">
      <h2>Login</h2>
      <div class="inputbox">
        <ion-icon name="mail-outline"></ion-icon>
        <input type="email" required>
        <label for="">Email</label>
      </div>
      <div class="inputbox">
        <ion-icon name="lock-closed-outline"></ion-icon>
        <input type="password" required>
        <label for="">Password</label>
      </div>
      <div class="forget">
        <label for=""><input type="checkbox" Remember Me <a href="#">Forget Password</a></label>

      </div>
      <button>Log in</button>
      <div class="register">
        <p>Don't have an account? <a href="#">Register</a></p>
      </div>
    </form>

Also, am I even referring to the password and email correctly too? Even though I think the problem will still happen.

Solution

So I see a few things straight away:

As mentioned, setTimeout does nothing here. It does not "slow down" the execution by that time, instead you call it as setTimeout(whatToDo, afterHowLong), passing a function inside.

I assume what you're trying to do here is to check the form after some time. Ideally, you'd want to add a submit button to the form and check once that's clicked.

Alternatively, if there's really a reason the time has to be fixed, you'd need to rewrite the code by the correct timeout syntax, e.g.:

function loginInfo() {
  email = document.getElementById('forma').value;
  password = document.getElementById('forma').value;
  setTimeout(function(){
    if (password === '123' && email==='[email protected]') {
      console.log('succesful')
    }
  }, 5);
}

loginInfo()

However, the immediate issue your code is encountering (i.e. why the log is running immediately), is of the malicious little semicolon after your if statement. E.g.:

if (condition); {
  code();
}

Here the if statement actually doesn't have a body, and instead the curlies serve as a scope that wraps the code inside, but is not in any way connected to the condition itself.

It's a nasty quirk of JS that I've had my fair share with.

That is of course disregarding the and (which doesn't work in JS, use && instead), as well as the lack of parentheses around the whole condition expression.

Edit:

You want to access the individual input fields, as have been mentioned.

Assuming e.g.

<body>
  <!-- ... -->
    <form id="forma">
      <input type="email" id="formEmailInput" />
      <input type="password" id="formPasswordInput" />
    </form>
  <!-- ... -->
</body>

You'd access values of those instead

function loginInfo() {
  const email = document.getElementById('formEmailInput').value;
  const password = document.getElementById('formPasswordInput').value;
  // ...
}