<div class="container">
  <button class="clickable bind-1">
    Clicking me prints to the console, but no style change

  <button class="clickable bind-2">
    Clicking me changes the style, but doesn't log a message

  <button class="clickable bind-3">
    Clicking on me has both features work
html {
  font-family: sans-serif;

.container {
  width: 960px;
  margin: auto;
  text-align: center;
  padding-top: 24px;

.clickable {
  display: inline-block;
  border: 1px solid grey;
  border-radius: 0;
  padding: 16px;
  background: #ceeaf7;
  font-size: 24px;
  cursor: pointer;
  border-radius: 4px;

  &:not(:first-child) {
    margin-top: 12px;

  &:hover {
    background: #eff;

.clicked-style {
  color: #e03616;
View Compiled
function startListening() {
  var message = "Print out this message!";
  var button1 = document.querySelector(".bind-1");

  var button2 = document.querySelector(".bind-2");
  button2.addEventListener("click", buttonClicked);

  var button3 = document.querySelector(".bind-3");
  button3.addEventListener("click", wrappedButtonClicked(message));

function wrappedButtonClicked(innerMessage) {
  return function (event) {
    console.log(innerMessage); // works if `.bind`
    this.className += " clicked-style"; // works if not `.bind`

function buttonClicked(event) {
  // this is an object now, not the button itself
  console.log(this.message); // works if `.bind`
  this.className += " clicked-style"; // works if not `.bind`


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.