Spot the bug - #67

programming web dev
1

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.

2

You’re invoking saveForm() right away, so addEventListener gets undefined instead of a function. It prints once on load, then nothing happens when you click.

Fix is to pass the function itself (or wrap it in an arrow):

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

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

One more thing: if this runs before #save exists, button will be null and you’ll get an error, so run it after the DOM is ready (or put the script at the end of the body).