-1

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,

Khalid Mukadam
  • 73
  • 1
  • 1
  • 4
  • Can you provide a example values of `at`, `period`, and `od` that incorrectly pass the test? (Your code looks right, so I suspect those values aren't what you expect them to be.) – user94559 Jun 23 '17 at 20:56
  • 2
    `&&` = both, `||` = either. Looks OK to me. – mjw Jun 23 '17 at 20:57
  • @smarx: at would be johndoegmail.com. A period ex. would be johndoe@gmailcom. An od (Online ID) example would be one with < 15 OR > 18 char.s : 1234a . Thanks, – Khalid Mukadam Jun 23 '17 at 20:59
  • 1
    @KhalidMukadam Please paste the code that sets these variables. The problem lies there, not in the IF/ELSE. – cs95 Jun 23 '17 at 21:01
  • looks like the code which you posted nothing wrong with it. We need more info to provide solution for your problem. – samnu pel Jun 23 '17 at 21:06
  • @Coldspeed & samnu pel: I pasted the related HTML & Javascript code above. – Khalid Mukadam Jun 23 '17 at 22:15
  • @KhalidMukadam Inside the callback, I highly recommend adding debugs and figuring out what is actually getting printed there. – cs95 Jun 23 '17 at 22:22

2 Answers2

0

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
DomeTune
  • 1,401
  • 10
  • 21
0

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.

user94559
  • 59,196
  • 6
  • 103
  • 103