Use actual form submission events (not button click events)

[oliverjam]

You are submitting your form data in a click event handler on the button. This isn't ideal as it breaks the way forms usually work. E.g. a keyboard user would expect to be able to hit Enter in an input to submit, but this doesn't work.

It would be better to listen for the 'submit' event on the form element. This will be fired when a type="submit" button is clicked, as well as on Enter keydown inside an input.

[oliverjam]

This would also make accessing the form input values easier. Instead of having to querySelector for each you would be able to access them on the submit event:

form.addEventListener("submit", event => {
  event.preventDefault();
  const name = event.target.elements.name.value;
  const talisman = event.target.elements.talisman.value;
  // event.target.elements is an object of all inputs where the keys match the `name` attribute
  // ... etc
}

More info in my blog post: https://oliverjam.es/blog/dom-intro/#step-2-user-input