<button id="btn1">click me</button>
 * This is just a syntactical variation of
 * the first proposed solution.
 * It is very common to use arrow functions
 * and to declare them directly in the
 * "addEventListener" instruction.
 * You are going to see this in almost
 * every codebase you will be working on.

// Step1: take a reference to the button
//        thanyou want to make clickable.
const btn1 = document.getElementById('btn1')

// Step2: associate an "anonymous event
//        handler" using an arrow function
btn1.addEventListener('click', () => {
  alert('You did it!')
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.