jQuery addClass example

Change class name on click in jQuery

HTML

<div class="compass compass-north">N</div>
<div class="compass compass-south">S</div>
<div class="compass compass-east">E</div>
<div class="compass compass-west">W</div>
<div id='direction'>
None
</div>

CSS

body {
  background: white;
  padding: 1em;
  font-family: Helvetica;
}

.compass {
  background-color: grey; 
  border: none;
  color: white;
  padding: 1em 2em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
}
#direction{
  padding: 1em 2em;
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;
}

JavaScript

// find elements
var buttons = $(".compass");
var direction = $('#direction');

// handle click and add class
buttons.on("click", function(){
  var cmd = $(this).html();
  direction.html(cmd);
})