JavaScript New to JavaScript, trying to make an image gallery change photos on click. Only the first image is showing

[teelim14]

document.addEventListener('DOMContentLoaded', init);

const baseURL = 'images/';
const nxt = document.querySelector('.nxt');
const bck = document.querySelector('.prev');
const slide = document.querySelector('.pic');
const cars = ['images/280z.jpg', 'images/300zx.jpg', 'images/cosworth.jpg', 'images/m3.jpg'];
let index = 1; //specifies that array starts at 1 because page loads with 0

function init() {
  // Set the initial image source to the first image in the 'cars' array
  slide.src = baseURL + cars[index];
}

nxt.onclick = function(e) {
  e.preventDefault(); // ignores event so page wont reload

  // Increment the index to the next image in the array
  index++;

  // If the index is greater than or equal to the length of the array, reset it to 0
  if (index >= cars.length) {
    index = 0;
  }

  // Set the image source to the next image in the array
  slide.src = baseURL + cars[index];
};

<h1>Slides!</h1>
<p>I reccommend you to export this pen and use your own images.</p>
<div class="slides">
 
  <figure>
    <img class="pic" src="images/280z.jpg">
  </figure>

  <a class="prev" href="">previous</a>
  <a class="nxt" href="">next</a>
 
</div>

h1 {
    text-align: center;
  }
 
  img {
    display: block;
  }
 
  .slides {
    width:400px;
    margin:auto;
  }
 
  .slides figure {
    margin:0;
  }
 
  .slides .nxt {
    float:right;
  }

 

[Johna]

Are you sure the image paths are correct?

slide.src = baseURL + cars[index];

let's assume index is 0, then here you're concatenating baseURL (which is "images/") with cars[0] (which is "images/280z.jpg").
The result will be "images/images/280z.jpg".
Are you sure that's correct? Or is it supposed to be "images/280z.jpg"?

 

[teelim14]

Are you sure the image paths are correct?

slide.src = baseURL + cars[index];

let's assume index is 0, then here you're concatenating baseURL (which is "images/") with cars[0] (which is "images/280z.jpg").
The result will be "images/images/280z.jpg".
Are you sure that's correct? Or is it supposed to be "images/280z.jpg"?

Its actually just "images/280z.jpg" Ive been trying a lot of different things to get my javascript code looking at the right directory. I removed the "images/" portion from all the array items but I'm still stuck with just the picture of the 280z.jpg

 

[JosiahMaybe]

Hey, for relative path you may use "../From1AboveDirectory" or "/inCurrentDirectory" or if you are on a computer, absolute path including C and stuff like you would have to type in or find to get to a file on like your computer. There is also location for document that you could make your URL (path) based on. Also, I notice you have like images/images/file, so remove images/ in cars all indices.
With it like that and as you specified without second images it seems like it should work.
Can you post updated code?
Are you sure you are getting slide?
do alert(slide) and see if it is null.
To be sure, add a name or an id amd use that if it is null.
X E.