Using AND/OR in Javascript IF Statements

Question

I am trying to make an IF statement in Javascript with the the following code:

     <input class="entry" id="modalod" type="text" placeholder="Enter online ID" name="id" required>
     <input class="entry" id="pass1" type="password" placeholder="Enter Passcode" name="psw" required>
     <input class="entry" id="pass2" type="password" placeholder="Repeat Passcode" name="psw-repeat" required>
     <input class="entry" id ="emailtext" type="text" placeholder="Enter Email" name="email" required>
     <a href="#" class="loginbtnanchor btn btn-primary btn-md" 
     onclick="listids()">Login <i class="fa fa-sign-in"></i></a>

     var modalok = document.getElementById("modalok");
     var idarray = [];
     var passcodearray = [];
     var emailtextarray = [];
     var od = document.getElementById("modalod").value;
     var pass1 = document.getElementById("pass1").value;
     var pass2 = document.getElementById("pass2").value;
     var emailtext = document.getElementById("emailtext").value;
     var at = emailtext.indexOf("@");
     var period = emailtext.indexOf(".");

     modalok.addEventListener("click", function(event) {

        if ( ( (at == -1) || (period == -1) )  && ( (od.length < 15) || 
           (od.length > 18) ) )
        {
            alert("NOTE: ONLINE ID MUST BE BETWEEN 15 AND 18 NUMBERS 
            LONG.\nPASSCODES DON'T MATCH.\nEMAIL INVALID.");
             event.preventDefault();

        }
        else {
           idarray.push(od);
           passcodearray.push(pass1);
           emailtextarray.push(emailtext);


            }
       }); 

What's supposed to happen is that ONLY if BOTH the "user" enters an invalid email AND a wrong id then the alert box appears. However, if just 1 of those conditions happens, the alert box appears. I am thinking the problem is with my syntax in using the AND/OR in this IF statement. I tried switching the order of the AND/OR and the conditions, but still couldn't fix it.

Could I please get help on this?

Thanks,

Answer 1

Move these lines inside the click handler:

var od = document.getElementById("modalod").value;
var pass1 = document.getElementById("pass1").value;
var pass2 = document.getElementById("pass2").value;
var emailtext = document.getElementById("emailtext").value;
var at = emailtext.indexOf("@");
var period = emailtext.indexOf(".");

As it stands, you're getting those values immediately (probably on page load). So, for example, od.length is always 0 and at is always -1, etc.

A good way to have debugged this yourself would have been to add a console.log right above the if statement to look at the values you were testing. (E.g. console.log(at, period, od);.) This would have made it clear that those values were incorrect, which would have pointed you in the direction of figuring out where those values were coming from.

Answer 2

I wrote a simple test method, that hopefully helps you. I took your conditions and testet it with right and wrong values. Here you go:

function validate(id, num, test){
  //if(isIdOrTestInvalid(id, test) && isNumInvalid(num))
  if((id <= -1 || test <= -1)  && (num < 15 || num > 18)) 
    console.log("Display Error!")
  else 
    console.log("Add data to arrays");
}
//you could split it in separte funtions
function isIdOrTestInvalid(id, test){
  return (id <= -1 || test <= -1);
}

function isNumInvalid(){
  return (num < 15 || num > 18);
}

validate(1, 16, 2); //all conditions ok -> add data
validate(-1, 16, 2); //only id wrong -> add data
validate(1, 10, 2); // only num wrong -> add data
validate(-1, 10, 2); // id and num wrong -> display error
validate(1, 10, -1); // num and test wrong -> display error
validate(-1, 10, -1); // id, num and test wrong -> display error