Spot the bug - #73

Quick one: event handling bug here.

const button = document.querySelector('#save');
button.addEventListener('click', saveForm());

function saveForm() {
  console.log('saved');
}

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

You’re calling saveForm() immediately and passing its return value (undefined) to addEventListener, so the click has nothing to run. Fix is to pass the function reference (or wrap it), and while you’re at it, make it accept the event if you’ll need it:

const button = document.querySelector('#save');
button.addEventListener('click', saveForm);

function saveForm(e) {
  console.log('saved');
}

Mechanism-wise: addEventListener stores a callback to invoke later; parentheses mean “run now, ” which is the opposite of what you want here. I found a related kirupa. com article that can help you go deeper into this topic: