Search code examples
javascriptaddeventlistener

addEventListener's function doesn't check for both cases

I'm doing a little daily project for a web developer course.

I'm having the user input his email as fake.email@gmail.com in an input tag, establish an array with the only permitted email being ["fake.email@gmail.com"], then I'll check if (email != permittedEmail) or else if (email = permittedEmail) and then print in console "You can't use that email to register" for the first case and "That's good" for the second case.

However, the event listener never finds the input email equal to "fake.email@gmail.com".

const input = document.getElementById("InputEmail");
const email = input.innerHTML;
const permittedEmail = ["fake.email@gmail.com"];
const buttonClick = document.getElementById("submit-button");

buttonClick.addEventListener('click', function () {
  if (email != permittedEmail) {
    console.log("You can't use that email to register");
  } else if (email = permittedEmail) {
    console.log("That's good");
  }
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <div class="container py-5">
  <div class="row justify-content-center">
      <div class="col-6">
          <form>
              <h1 class="mb-5 fw-bold fs-1 text-center">Inserisci la tua mail</h1>
              <div class="mb-3">
                  <label for="InputEmail1" class="form-label">Indirizzo Email</label>
                  <input type="email" class="form-control" id="InputEmail" aria-describedby="emailHelp">
              </div>
              <div class="d-flex justify-content-center">
                  <div id="submit-button" type="submit" class="btn btn-primary">Submit</div>
              </div>
          </form>
      </div>
  </div>
</div>

I'm really new to JS so it could some typos or some basic logic mistakes but I can't really progress at this point so any help would be awesome!

Solution

  • There are several problems here...

    1. Use .value to get the value of an <input>, not .innerHTML
    2. Don't get the value when the page loads, because the user hasn't typed anything yet. Get the value in the click event handler.
    3. This will always be true: email != permittedEmail Because a single value and an array of values are never the same thing. You probably want to use .includes() to check if an array includes a value.
    4. This is assignment, not comparison: email = permittedEmail
    5. You don't need the second if at all, since the logical condition is "all other cases" which is exactly what else means.

    Putting all of those together...

    const input = document.getElementById("InputEmail");
const permittedEmail = ["fake.email@gmail.com"];
const buttonClick = document.getElementById("submit-button");

buttonClick.addEventListener('click', function () {
  const email = input.value;
  if (!permittedEmail.includes(email)) {
    console.log("You can't use that email to register");
  } else {
    console.log("That's good");
  }
});
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <div class="container py-5">
  <div class="row justify-content-center">
      <div class="col-6">
          <form>
              <h1 class="mb-5 fw-bold fs-1 text-center">Inserisci la tua mail</h1>
              <div class="mb-3">
                  <label for="InputEmail1" class="form-label">Indirizzo Email</label>
                  <input type="email" class="form-control" id="InputEmail" aria-describedby="emailHelp">
              </div>
              <div class="d-flex justify-content-center">
                  <div id="submit-button" type="submit" class="btn btn-primary">Submit</div>
              </div>
          </form>
      </div>
  </div>
</div>

    As an aside... While not a logical problem, names are equally important. This variable name is misleading:

    const permittedEmail = ["fake.email@gmail.com"];

    The name is singular, but the value is an array which is a list (plural) of values. This misleading name led to this bug:

    if (email != permittedEmail) {

    Intuitively it makes sense to compare two singular things in this way. But since one of these two things is not singular but is in fact plural, the comparison won't do what you expect it to do. Because a basket of apples will never itself be an apple.

    Use variable names which intuitively and semantically describe what they mean:

    const permittedEmails = ["fake.email@gmail.com"];