Javascript array slideshow

Question

I'm very new to Javascript and am having trouble getting a simple array slideshow to work. My plan was to have the left and right buttons change the src of the image. I took different parts of different slideshows online to try and make this. The specific issue I'm having right now is that the buttons don't seem to do anything. I'd think they would execute my function on click, but I assume my syntax is incorrect, or something else is off. Any help is appreciated, although I would prefer it if the solution didn't require me to use jQuery or PHP as I'm still very new to JS. Thanks.

var images = [
        "Gallery/1.jpg",
        "Gallery/2.jpg",
        "Gallery/3.png",
        "Gallery/4.jpg",
        "Gallery/5.jpg",
        "Gallery/5-1.jpg",
        "Gallery/6.jpg",
        "Gallery/7.jpg",
        "Gallery/8.jpg",
        "Gallery/9.jpg",
        "Gallery/10.jpg",
        "Gallery/11.jpg",
        "Gallery/12.jpg",
        "Gallery/13.jpg",
        "Gallery/14.jpg",
        "Gallery/15.jpg",
        "Gallery/16.jpg",
        "Gallery/17.jpg",
        "Gallery/18.jpg",
        "Gallery/19.jpg",
        "Gallery/20.jpg",
        "Gallery/21.jpg",
        "Gallery/22.jpg",
        "Gallery/23.jpg",
        "Gallery/24.jpg",
        "Gallery/25.jpg",
        "Gallery/26.jpg",
        "Gallery/27.jpg",
        "Gallery/28.jpg",
        "Gallery/29.jpg",
        "Gallery/30.jpg",
        "Gallery/31.jpg",
        "Gallery/32.jpg",
        "Gallery/33.jpg",
        "Gallery/34.jpg",
        "Gallery/35.jpg",
        "Gallery/36.jpg",
      ];

      var index = 0;

      function changeImg(direction) {
        document.slide.src = images[index];

        if (direction == left) {
          if (index == 0) {
            index = 35;
          } else {
            index--;
          }
        }

        if (direction == right) {
          if (index == 35) {
            index = 0;
          } else {
            index++;
          }
        }
      }

<div id="slideshow">
<img name="slide" src="Gallery/1.jpg">
</div>

<input type="button" value="<" onclick="changeImg(left);" />
<input type="button" value=">" onclick="changeImg(right);" />

Answer 1

I can see you are passing left and right in the function call from HTML , but there is nothing like in the HTML , instead you should pass them as string like below:

<input type="button" value="<" onclick="changeImg('left');" />
<input type="button" value=">" onclick="changeImg('right');" />

and when you are checking the condition in script , do as below === and '' changes

var index = 0;

      function changeImg(direction) {
        document.slide.src = images[index];

        if (direction === 'left') {
          if (index == 0) {
            index = 35;
          } else {
            index--;
          }
        }

        if (direction === 'right') {
          if (index == 35) {
            index = 0;
          } else {
            index++;
          }
        }
      }