Toggle between classes using JavaScript

I have following code.

HTML is below.

<div class="normal">
  <p>This is Paragraph No.1</p>
  <p>This is Paragraph No.2</p>
  <p>This is Paragraph No.3</p>
  <p>This is Paragraph No.4</p>
  <p>This is Paragraph No.5</p>
</div>

CSS is below

.normal {
  color: #808080;
  border: 4px solid blue;
  border-radius: 50px 50px;
  width: 800px;
  font-family: 'Comic Sans MS';
  margin: auto;
  margin-top: 10px;
  font-size: 30px;
  -webkit-transform: rotate(10deg);
}
.change {
  color:#ffd800;
  border: 6px solid orange;
  border-radius: 50px 50px;
  width: 800px;
  font-family: 'Comic Sans MS';
  margin: auto;
  margin-top: 10px;
  font-size: 30px;
  -webkit-transform: rotate(20deg);
}

What I want is to toggle my div class between normal and change whenever i click inside the div element. I know how to do it using jQuery but i want to use pure javascript?

Following is my try

(function () {
  var pElement = document.getElementsByClassName("normal");
  pElement.onclick = function () {
    //what to do here
  };
} ());

solution

If browser support isn’t an issue, you could use the toggle() method/classList.

Example Here

(function () {
  var pElement = document.getElementsByClassName("normal")[0];
  pElement.addEventListener('click',function(){
    pElement.classList.toggle('change');
  });
} ());

Browser support for classList.