jQuery addClass example

Change class name on click in jQuery

by HSilvaDaytona

HTML

<div id="banner-message">
  <p>Pick One</p>
  <p id="names"> </p>
  <button>Choose Student</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
  content: "Henry";
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function() {
  banner.addClass("alt")
  students();
})

function students() {

  var someNames = [
    "Patrick Ancrum",
    "Aren Anderson",
    "Sean Blythe",
    "Eugene Borts",
    "Andrew Comiskey",
    "Jorge Coppia",
    "Maria Cortez",
    "Melinda Crimi",
    "Brian Dean",
    "Clarence Downs",
    "Ronald Eaglin 	Instructor",
    "Mina El Karmadi",
    "Christopher",
    "Christopher",
    "Alexander",
    "Ret King",
    "Jacob Lamont",
    "Ember Leipert",
    "Michael Luciano",
    "Thomas Matchen"
  ];

  document.getElementById("names").innerHTML = someNames[Math.floor(Math.random() * 19)];

}