JavaScript Not Manipulating Images

Question

I'm new to Javascript and I have an assignment where I essentially just copied code from the instructions but when I go to run the whole website the JS doesn't do anything.

The objective is to add a click event handler to each of the thumbnail images so that when the smaller image is clicked, your code will show the larger version of the image in the <img> element within the <figure> element.

This same event handler will also set the <figcaption> text of the <figure> to the clicked thumbnail image's title attribute. The click event handler will be attached to the <div id="thumbnails"> element and not to the individual <img> elements.

This is what the JS should do:

1. When you click on one of the thumbnail images, the corresponding larger image is displayed as the main figure.

2. When you mouse over the main figure, the title should display against a slightly opaque white background and then fades once the mouse pointer is moved off

window.addEventListener("load", function() {
  /*Noah Ratcliff*/
  var thumbs = document.getElementById("thumbnails");
  thumbs.addEventListener("click", function(e) {
    if (e.target.nodeName.toLowerCase() == 'img') {
      var clickedImageSource = e.target.src;
      var newSrc = clickedImageSource.replace("small", "medium");
      var featuredImage = document.querySelector("#featured img");
      featuredImage.src = newSrc;
      featuredImage.title = e.target.title;
    }
  });
  var featured = document.getElementById("featured");
  thumbs.addEventListener("mouseover", function(e) {
    var caption = document.querySelector("#featured figcaption");
    caption.style.transition = "opacity 1.5s";
    caption.style.opacity = 0.80;
    caption.innerHTML = document.querySelector("#featured img").title;
    var caption = document.querySelector("#featured figcaption");
    caption.style.transition = "opacity 1.5s";
    caption.style.opacity = 0;
  });
});

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Lobster);
p,
h1,
h2,
h3,
ul,
li,
body {
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
nav,
footer {
  font-family: Lobster, Cambria, "Times New Roman", serif;
}

body {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 100%;
  background-color: #E8EAF6;
}

header {
  padding: 15px;
  width: auto;
  margin: 0 0;
  background-color: #303F9F;
  color: #FAFAFA;
  height: 30px;
}

header h2 {
  float: left;
  font-size: 22pt;
  margin-left: 10px;
}

header nav {
  float: right;
  margin: 10px 15px 10px 10px;
  top: 5px;
}

main {
  margin: 20px 20px;
}

#featured {
  margin: 0 2px;
  border: solid 1px #ccc;
  padding: 8px 5px 3px 9px;
  width: 646px;
  background-color: #FAFAFA;
}

#featured figcaption {
  position: absolute;
  top: 476px;
  left: 32px;
  width: 636px;
  height: 70px;
  background-color: floralwhite;
  font-family: 'Open Sans', Verdana, Arial, sans-serif;
  font-size: 150%;
  font-weight: bold;
  opacity: 0;
  padding: 22px 2px 2px 2px;
  text-align: center;
  display: block;
}

#thumbnails img {
  width: 116px;
  height: 116px;
  border: solid 1px #ccc;
  padding: 4px;
  margin: 5px 2px;
  background-color: #FAFAFA;
}

#thumbnails img:hover {
  transform: scale(1.1);
  transition-duration: 300ms;
  cursor: pointer;
}

<header>
  <h2>Share Your Travels</h2>
  <nav><img src="images/menu.png"></nav>
</header>
<main>
  <figure id="featured">
    <img src="images/medium/5855774224.jpg" title="Battle" alt="big version">
    <figcaption>Battle</figcaption>
  </figure>
  <div id="thumbnails">
    <img src="images/small/5855774224.jpg" title="Battle" alt="Battle">
    <img src="images/small/5856697109.jpg" title="Luneburg" alt="Luneburg">
    <img src="images/small/6119130918.jpg" title="Bermuda" alt="Bermuda">
    <img src="images/small/8711645510.jpg" title="Athens" alt="Athens">
    <img src="images/small/9504449928.jpg" title="Florence" alt="Florence">
  </div>
</main>

Answer 1

There are several things that are not right in the code: put the event listener on the thumbs instead of figure, abusing id's for css, using the style javascript instead of adding and removing classes (which makes it harder and is a bad practice in general), using querySelector when there is no need (witch also makes your code harder to read and querySelector is slower than getElementById).

Here is an example which should do what I understand you want. I'm not sure tough if I got the opacity thing right. There you will have to work.

window.addEventListener("load", function() {
  /*Noah Ratcliff*/
  const thumbs = document.getElementById("thumbnails");
  thumbs.addEventListener("click", function(e) {
    if (e.target.nodeName.toLowerCase() == 'img') {
      const clickedImageSource = e.target.src;
      const newSrc = clickedImageSource.replace("small", "medium");
      const featuredImage = document.getElementById("featured-img");
      featuredImage.src = newSrc;
      featuredImage.title = e.target.title;
      featuredImage.alt = e.target.alt
    }
  });
  const featured = document.getElementById("featured");
  featured.addEventListener("mouseover", function(e) {
    const captition = document.getElementById("fig-captition");
    captition.classList.add("captition-hovered");
  });
  featured.addEventListener("mouseout",function(e) {
      const captition = document.getElementById("fig-captition");
      captition.classList.remove("captition-hovered");
  });
});

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Lobster);
p,
h1,
h2,
h3,
ul,
li,
body {
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
nav,
footer {
  font-family: Lobster, Cambria, "Times New Roman", serif;
}

body {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 100%;
  background-color: #E8EAF6;
}

header {
  padding: 15px;
  width: auto;
  margin: 0 0;
  background-color: #303F9F;
  color: #FAFAFA;
  height: 30px;
}

header h2 {
  float: left;
  font-size: 22pt;
  margin-left: 10px;
}

header nav {
  float: right;
  margin: 10px 15px 10px 10px;
  top: 5px;
}

main {
  margin: 20px 20px;
}

.featured {
  margin: 0 2px;
  border: solid 1px #ccc;
  padding: 8px 5px 3px 9px;
  width: 646px;
  background-color: #FAFAFA;
}

.captition-hovered {
  position: absolute;
  top: 476px;
  left: 32px;
  width: 636px;
  height: 70px;
  font-family: 'Open Sans', Verdana, Arial, sans-serif;
  font-size: 150%;
  font-weight: bold;
  padding: 22px 2px 2px 2px;
  text-align: center;
  position: absolute;
  z-index:1;
  top: 50%;
  opacity: 1;
  background: rgba(255,250,240, 0.51);
}

.thumbnails img {
  width: 116px;
  height: 116px;
  border: solid 1px #ccc;
  padding: 4px;
  margin: 5px 2px;
  background-color: #FAFAFA;
}

.thumbnails img:hover {
  transform: scale(1.1);
  transition-duration: 300ms;
  cursor: pointer;
}

.featured {
  position: relative;
}

.featured-img:hover {
  transition:opacity 1.5s;
  opacity: 0.5;
}

<header>
  <h2>Share Your Travels</h2>
  <nav><img src="images/menu.png"></nav>
</header>
<main>
  <figure class="featured" id="featured">
    <img class="featured-img" id="featured-img" src="https://www.w3schools.com/css/img_lights.jpg" title="Battle" alt="big version">
    <figcaption id="fig-captition">Battle</figcaption>
  </figure>
  <div class="thumbnails" id="thumbnails">
    <img src="images/small/5855774224.jpg" title="Battle" alt="Battle">
    <img src="images/small/5856697109.jpg" title="Luneburg" alt="Luneburg">
    <img src="images/small/6119130918.jpg" title="Bermuda" alt="Bermuda">
    <img src="images/small/8711645510.jpg" title="Athens" alt="Athens">
    <img src="images/small/9504449928.jpg" title="Florence" alt="Florence">
  </div>
</main>

I also replaced var keyword since now is really indicated to use const and let for your variables.

inline style css link

Also notice how I just added and removed a class instead of manipulating the style one by one. Is way easier to maintain and read. Not to mention that inline styling is overwriting any other type of css. So if you want to change it later the only way is inline styling which can be annoying in certain circumstances.

query selector vs getDocumentById