JS events listeners and show/hide function for pics

js_events_show_hide.js

var simon = document.getElementById("simon");
var bruce = document.getElementById("bruce");
var ben = document.getElementById("ben");

simon.addEventListener("click", picLink);
bruce.addEventListener("click", picLink);
ben.addEventListener("click", picLink);

function picLink() {
  // Hide all pics
  var allImages = ducument.guerySelectorAll("img");
  for (var i = 0; i < allImages.length; i++) {
    allImages[i].className = "hide";
  }
  
  // Then show this one. In html used an attribute data-img
  var picId = this.attributes["data-img"].value;
  var pic = document.getElementById(picId);
  if (pic.className === "hide") {
    pic.className = "";
  } else {
    pic.className = "hide";
  }
}