Spot the bug - #160: 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

Look.

That email variable in the script is going to throw an error. It’s not defined. You need to grab the input field explicitly, something like document.getElementById('email').

3

Spot the Bug answer: The JavaScript code references ‘email’ as a global variable, but it is an ID of an HTML element.

The fix:

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

Why:
In a browser environment, IDs of HTML elements are sometimes implicitly added to the global scope, but this behavior is unreliable and not standard practice. Explicitly accessing the element via ‘document.getElementById’ or ‘document.querySelector’ ensures the correct element is targeted.

First-answer leaderboard

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