I can’t log any variables. I linked the script.js file in the html file as well as the styles.css file. Why is the styles.css file working and the script.js file not working?
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightbox Viewer</title>
<link href="styles.css" type ="stylesheet">
</head>
<body>
<div class="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg" class="gallery-item">
<img src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg" class="gallery-item">
<img src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg" class="gallery-item">
</div>
<div class="lightbox">
<button id="close-btn"></button>
<img id="lightbox-image">
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
.lightbox{
position: fixed;
top:0;
left:0;
width:100%;
height: 100%;
background-color: gray;
display: none;
}
/* file: script.js */
const gallery = document.querySelectorAll("gallery");
console.log("what?")
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Safari/605.1.15
Build a Lightbox Viewer - Build a Lightbox Viewer
Hi @dreyes61
What variables exactly are you trying to log?
You have a few issues with this line here
First issue is that you are just passing in gallery.
Remember in CSS, when you want to specify a class you use a dot. When you want to specify an id, you use a #. If you want to just specify an actual HTML element like p element or a element, then you just refer to that name.
Second issue is that you are using querySelectorAll on the element with (I’m assuming) class of gallery. However, querySelectorAll returns a NodeList
You typically use it to get all elements with a particular class name. Or all elements of the same type like all paragraph elements or something like that.
When I look at your HTML, you only have one element with the class of gallery.
Hope that helps
ILM
May 1, 2025, 9:21pm
6
your querySelectorAll is selecting zero elements
It’s not working for me. Hers my html. If you would be so kind.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightbox Viewer</title>
<link href="styles.css" type ="stylesheet">
</head>
<body>
<div class="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg" class="gallery-item">
<img src= "https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg" class="gallery-item">
<img src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg" class="gallery-item">
</div>
<div class="lightbox">
<button id="close-btn"></button>
<img id="lightbox-image">
</div>
<script src="script.js"></script>
</body>
</html>
Read this carefully please
You have a few issues with this line here
First issue is that you are just passing in gallery.
But this is no HTML element strictly called gallery.
There is an element with a class called gallery.
Remember in CSS, when you want to specify a class you use a dot. When you want to specify an id, you use a #. If you want to just specify an actual HTML element like p element or a element, then you just refer to that name.
Second issue is that you are using querySelectorAll on the element with …
I thought i covered everything with this code. What am i missing?
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightbox Viewer</title>
<link href="./styles.css">
</head>
<body>
<div class="gallery">
<img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg">
<img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg">
<img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg">
</div>
<div class="lightbox">
<button id="close-btn">×</button>
<img id="lightbox-image">
</div>
<script src="../script.js"></script
</body>
</html>
/* file: styles.css */
.lightbox{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: lightgray;
display: none;
}
/* file: script.js */
const gallery = document.querySelectorAll("div.gallery img.gallery-tem");
console.log(gallery);
const lightbox = document.querySelector(".lightbox");
const close = document.getElementById("close-btn");
console.log(close.textContent)
for(item of gallery){
item.addEventListener("click",switchImage);
item.addEventListener("click",closeLightbox);
item.addEventLightbox("click",closeLightbox);
}
function switchImage(event){
lightbox.style.display = "flex";
const thumbnail = event.target.src;
lightboxLink = thumbnail.replace("-thumbnail","");
lightbox.src = lightboxLink;
}
function closeLightbox(){
lightbox.style.display = "none";
}
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Safari/605.1.15
Build a Lightbox Viewer - Build a Lightbox Viewer
Please talk about which tests are failing and how you got stuck trying to debug your code.
I didn’t get stuck anywhere I thought my code would work.
Ok, and what have you tried to investigate why those tests are failing?
You have this console.log() line:
dreyes61:
console.log(gallery);
What can you see in the console?
Why are you even running the tests, when clearly your code does not work. It behaves nothing like the example project.
You are overcomplicating what it is you need to select here. Remember, you can select based on just the class name prepended with a period to indicate it’s a class.
