You arguably should not be using HTML event handler attributes

(1) you should arguably disable eval to help prevent code injections vs CSP. Turning that on disables HTML event handler attributes as those are strings that are "eval"ed

https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

(2) using event handler attributes or the JS equivalent (elem.onclick = somefunc) is not very forward thinking as only one handler can be assigned. Sure, you tell yourself "Well, I'm only using one handler" ... until you're not. For example you decide to add event tracking or similar functionality and, since you've followed your pattern of using event handler attributes, only the last one to assign its function wins.

(3) Its often much easier to add events in code

https://jsfiddle.net/jfkds5px/

Yes, you can assign by attribute (see 2) or you can create HTML text (see 1)

(4) this was mentioned in the article but in an event handler, this = the element the listener was assigned to, event.target = the element that was event was triggered on

https://jsfiddle.net/8efd4ghb/

(5) button in forms submit the form by default. If you don't want that behavior add type="button". No need for event.preventDefault();