[HTML/JS] Creating a button to go to next image


I’m trying to create a simple gallery but I’m being unable to. I’ve already tried so many things, searched so much but I’m still not able to do it, so here I am asking for help.

I have an array with the location of the pictures.

What I want to happen: When entering the page you see the first picture of the array, clicking on the button on the right [>] will change to the next picture, and so on.

I obviously want to add a back button, not let it go pass the last image etc. but I’m unable to create a button to go through the array, learning how to do that, what is it that I am doing wrong, I believe I can figure out the rest,

Here’s the HTML

<!DOCTYPE html> <head> <title>Image Gallery</title> <link rel="icon" type="image/x-icon" href="/favicon.png"> <link rel="stylesheet" href="/Source.css"> <script src="./jsFile.js"></script> </head> <body> <header> <div class="ofHeader"> <img src="./nature-scene-with-river-hills-forest-mountain-landscape-flat-cartoon-style-illustration_1150-37326.webp"> <h1 id="upTitle">Nature</h1> </div> <nav> <ul> <a id="selected"><li>Flowers</li></a> <a><li>Landscape</li></a> <a><li>Animals</li></a> </ul> </nav> </header> <h2>Flowers</h2> <div class="gallery"> <script>ultI()</script> <div id="picGallery" > <img class="picItself" src="./flowerPictures/flowerPic1.jpeg"> </div> <div class="button" id="right"> <img class="buttonArrow" src="./button/Arrow.png"> <img class="buttonBox" src="./button/BoxForArrow.png"> </div> <!---<div class="button" id="left"> <img class="buttonArrow" src="./button/Arrow.png"> <img class="buttonBox" src="./button/BoxForArrow.png"> </div> ----> </div> </body>

And here’s the JS:

class media { pictures = []; } const flowers = new media; flowers.pictures=["./flowerPictures/flowerPic1.jpeg","./flowerPictures/flowerPic2.jpeg","./flowerPictures/flowerPic3.jpeg","./flowerPictures/flowerPic4.jpeg"]; const myBtn = document.getElementById("right"); let firstPicture = flowers.pictures[0]; let currentPicture= null; function ultI(){ myBtn.addEventListener("click",changePic()); function changePic(){ if(!currentPicture){ let currentPicture = firstPicture } else{ currentPicture++; } document.getElementById("picGallery").innerHTML = `<img class='picItself' src= '${currentPic}'></img>`; } }

I tried to clean the code for you but I’ve tried so many different things already it may have a mix of different approaches.

I don’t think the CSS is needed but I’ll include it in case you want to reproduce the full page on your pc to better understand what I want/what’s the problem:

:root{ font-family: Helvetica, sans-serif; } *{ margin: 0; padding: 0; } header{ position: relative; justify-content: center; align-items: center; width: 100%; height: 13rem; } .ofHeader { display:flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 13rem; } #upTitle{ position: absolute; margin-left: auto; margin-right: auto; width: 8rem; color: whitesmoke; } .ofHeader img { display: flex; position: absolute; width: 100%; height: 100%; object-fit: cover; } nav{ display: block; background: darkgreen; height: 3rem; justify-content: center; } li{ display: inline-flex; color: white; padding: 1rem 10px; } a li{ background-color: blue; } .main { display:block; height: 60%; } h1 { text-align: center; margin-top: 6rem; } h2 { text-align: center; margin-top: 6rem; } .aboutUs{ max-width: 80%; text-align: center; margin-left: auto; margin-right: auto; } .gallery { position: relative; width: 100%; margin-top: 2rem; margin-bottom: 4rem; align-items: center; } .picItself { position: absolute; display: flex; max-width: 70%; height: 500px; margin-left: auto; margin-right: auto; left: 0; right: 0; justify-items:end; } #right.button { position: absolute; display: flex;/*goes between none and hidden*/ align-items: center; right: 100px; top: 230px; } #left.button { position: absolute; display: none;/*goes between none and hidden*/ align-items: center; left: 100px; top: 230px; transform: rotate(180deg) } .buttonArrow { max-width: 10px; height: 20px; opacity: 1; padding-left: 3px; } .buttonBox { position: absolute; opacity: 0.5; height: 40px; } .buttonBox:hover{ opacity: 0.6; } .buttonBox:active{ opacity: .3; }

Thank you! Have a good day :slight_smile:

[Codebyte doesn’t let me choose HTML/CSS nor even “plain text” so I’ve put all in JS, hope it doesn’t interfere with anything]


there is a lot to debug, so let’s start one by one:
The most important thing is that I recommend that you review class syntax, this is not valid:

class media {
    pictures = [];

As a convention you would use uppercase for class names: class Media
then you need a constructor for your properties:

constructor(pictures = []) {
  	this.pictures = pictures;

Then you can initialize the class with the images:

const flowers = new Media([...]);

If you use class syntax, I’d also recommend that you also write your functions as class methods. Otherwise I don’t really see the use of a class if it just holds the array.

1 Like

It would be easier to read if you just wrap your code in three backticks each or if you mark it and click the </> icon rather than using the codebyte.

I was so caught up in trying to have JS and HTML working together I forgot the basis of what I’ve already learn from JS :sweat_smile: , I’m taking the course Intermediate JavaScript but so far I’m only working in JS, not how to make them work together.

I guess what I most learned here is that I need to go further on the course before trying to do things on my own.

Thank you for your replies and for your time!

1 Like

Ok, you’re welcome. You don’t need to use class syntax though, but I think it would be smart if you do (with all functions written as class methods. Your connection between html and js seems to be fine so far. Good luck!

1 Like