Spot the bug - #50

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

That email. value line is broken because email isn’t defined anywhere reliably; sometimes browsers expose id="email" as a global, sometimes they don’t, so you’ll get a ReferenceError. Grab the input explicitly (and stop the submit when it’s invalid), e. g. :```
const emailInput = document.querySelector(‘#email’);

document.querySelector(‘form’).addEventListener(‘submit’, (e) => {
if (!emailInput.value.includes(‘@’)) {
e.preventDefault();
alert(‘invalid’);
}
});