HTML Academy
Adding an image
Getting to know events15/25
Back to the list of tasks
  • 1. Introduction to events
  • 2. How to add a handler
  • 3. How events are arranged
  • 4. Default actions
  • 5. Please pass the function
  • 6. Hiding the popup
  • 7. Pressing a key
  • 8. Choosing a key
  • 9. With one click
  • 10. Summary of “Events in JavaScript”, part 1
  • 11. First program: “Don’t be shy”
  • 12. Welcome to our photo gallery
  • 13. Click ’em all!
  • 14. Adding an image
  • 15. A bug has crept into the system
  • 16. Scope
  • 17. Global scope
  • 18. Inside out variables
  • 19. Becoming Independent
  • 20. Closures
  • 21. Let’s prepare for school
  • 22. Fixing the gallery
  • 23. Getting to the heart of the matter
  • 24. Summary of “Events in JavaScript”, part 2
  • 25. The Second Program: “Señor Tomato”
Scope
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

A bug has crept into the system

It seems that something has gone wrong in our program. We click on the preview, but the large image does not appear. We verified that the program works in the previous assignment: We saw the messages that were displayed in the console.

What do developers do in this situation? They debug the code.

The program stopped working after we added the following code:

fullPhoto.src = photos[i];

What could possibly be wrong with it? There is nothing suspicious about part of fullPhoto.src. We found the image by searching for its class. We saved it to a variable, and now we want to write something to the src attribute. And here photos[i] could be the cause of the failure.

The issue is not with the name of the photos array. We wrote it correctly, after all. The only other aspects are the index and the current element in the array. Perhaps there is something wrong with them.

We will output them to the console and check them. It seems that the problem is there.

Comments

  • index.html
  • style.css
  • script.js
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Muffin Gallery</title> <link href="gallery/setting.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="pattern"> <section class="gallery"> <h1>Muffin Gallery</h1> <p class="gallery__photo-full"> <img class="full-photo" src="gallery/laptop-large.jpg" width="550" height="367" alt="Large photo"> </p> <p class="gallery__photo-previews"> <button class="gallery__photo-preview" type="button"> <img src="gallery/laptop.jpg" alt="Preview with laptop"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/microphone.jpg" alt="Preview with microphone"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/keyboard.jpg" alt="Preview with keyboard"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/signboard.jpg" alt="Preview with tablet"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/tree.jpg" alt="Preview with tree"> </button> </p> </section> <script src="script.js"></script> </body> </html>
CSS
.gallery { display: flex; flex-direction: column; align-items: center; } .gallery__photo-full { margin-bottom: 12px; } .gallery__photo-full img { display: block; } .gallery__photo-previews { display: flex; list-style-type: none; margin: 0; width: 550px; padding: 0; justify-content: space-between; } .gallery__photo-preview { padding: 0; border: 0; border-radius: 0; background: none; } .gallery__photo-preview:hover, .gallery__photo-preview:focus { opacity: 0.7; } .gallery__photo-preview img { display: block; object-fit: cover; width: 100px; height: 100px; } .gallery__photo-preview--active img { outline: 5px solid red; outline-offset: -5px; } .pattern { background: url("gallery/leaves-pattern.png") 0 0 repeat; }
JavaScript
var photos = [ 'gallery/laptop-large.jpg', 'gallery/microphone-large.jpg', 'gallery/keyboard-large.jpg', 'gallery/signboard-large.jpg', 'gallery/tree-large.jpg' ]; var thumbnails = document.querySelectorAll('.gallery__photo-preview'); var fullPhoto = document.querySelector('.full-photo'); for (var i = 0; i < thumbnails.length; i++) { thumbnails[i].addEventListener('click', function () { fullPhoto.src = photos[i]; }); }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

Click inside the mini browser to put the focus in this window.

100%
Console
Goalscompleted
0
    1. Output the counter i to the console inside the handler and at the very beginning.
    2. Output photos[i] to the next line of the console.
    3. Click on any two thumbnails and look at the console results.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.