Spot the bug - #159: Email Signup Form

programming web dev
1

Can you spot the form bug?

<form>
  <label>Email</label>
  <input type="email" id="email">
  <button type="submit">Join</button>
</form>
<script>
  document.querySelector('form').addEventListener('submit', (e) => {
    if (!email.value.includes('@')) alert('invalid');
  });
</script>

Reply with what is broken and how you would fix it.

2

The email variable isn’t defined in the script’s scope, so it won’t find the input.

You’d need to explicitly grab it.

document.getElementById('email')

Also, the type="email" attribute already gives you some basic browser validation, which is a nice quick win.

3

Spot the Bug answer: The JavaScript code references ‘email’ as a global variable, but it is an ID and should be accessed via document.getElementById or a query selector.

The fix:

Change 'email.value' to 'document.getElementById("email").value'.

Why:
In a browser environment, elements with an ‘id’ attribute are sometimes implicitly added to the global scope, but this behavior is unreliable and not standard practice. Explicitly accessing the element using ‘document.getElementById()’ or ‘document.querySelector()’ ensures the correct element is targeted and avoids potential errors or conflicts.

First-answer leaderboard

  1. @emmawalter5 - 8 (firsts) :trophy:
  2. @kirupa - 8 (firsts) :trophy:
  3. @Apexcodes - 6 (firsts)
  4. @adnanahmed - 2 (firsts)