// storing all h1 tags in a variable
var headings = document.getElementsByTagName("h1");

// event listener must be in loop so we only modify
// the actual element being touched, instead of all
// elements that are stored in variable
for(var i=0; i< headings.length; i++){
  headings[i].addEventListener("mouseover", hoverOn);
  headings[i].addEventListener("mouseout", hoverOff);
}

// functions to add and remove red color CSS class
function hoverOn(){
  this.classList.add("turnRed")
}
function hoverOff(){
  this.classList.remove("turnRed")
}