How do I change the image src using JQuery's else/if statements?

Question

HTML: It's really simple, just the slide with the buttons to change the image.

<img src="https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg" id="myslides">
<ul id="mylist">
  <li><button class="btns" id="btn1">Previous</button></li>
  <li><button class="btns" id="btn2">Next</button></li>
</ul>

CSS: I don't need help here, I'm not much into design.

#myslides {
  height: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#mylist,
li {
  display: inline-block;
  position: relative;
  top: -5px;
  left: -20px
}

.btns {
  height: 50px;
  width: 200px;
  background: #666666;
  color: white;
  font-size: 20px;
}

JQuery: I have no clue what I'm doing wrong here. "image" can't be undefined because it's not "img" so why isn't the src change working?

$(docuent).ready(function() {
  var slide = $("#myslides");
  $("#btn2").click(function() {
    if (slide.attr("src") == "https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg") {
      slide.attr("src", "https://techgage.com/wp-content/uploads/2015/11/The-Witcher-3-Wild-Hunt-at-3440x1440-Resolution.jpg");
    }
  });
});

$(docuent).ready(function() {
  var slide = $("#myslides");
  $("#btn2").click(function() {
    if (slide.attr("src") == "https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg") {
      slide.attr("src", "https://techgage.com/wp-content/uploads/2015/11/The-Witcher-3-Wild-Hunt-at-3440x1440-Resolution.jpg");
    }
  });
});

#myslides {
  height: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#mylist,
li {
  display: inline-block;
  position: relative;
  top: -5px;
  left: -20px
}

.btns {
  height: 50px;
  width: 200px;
  background: #666666;
  color: white;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg" id="myslides">
<ul id="mylist">
  <li><button class="btns" id="btn1">Previous</button></li>
  <li><button class="btns" id="btn2">Next</button></li>
</ul>

Answer 1

your code is properly working but you need to change only $(docuent) to $(document)

hear you can see Click to see

$(document).ready(function() {  

you write here like below

$(docuent).ready(function() {  

Answer 2

You misspelled document. If you're looking for a more scalable way to make a slider, you could try something like this:

$(document).ready(function () {
  var visibleSlide = $("#myslides");
  var slideList = [
    "https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg",
    "https://techgage.com/wp-content/uploads/2015/11/The-Witcher-3-Wild-Hunt-at-3440x1440-Resolution.jpg"
  ];
  var currentSlideIndex = 0;

  $("#btn1").click(function () {
    changeSlide('previous');
  });

  $("#btn2").click(function () {
    changeSlide('next');
  });

  function changeSlide(direction) {
    switch(direction) {
      case 'previous':
        if (currentSlideIndex > 0) {
          currentSlideIndex--;          
        }

        break;

      case 'next':
        if (currentSlideIndex < slideList.length - 1) {
          currentSlideIndex++;
        }

        break;

      default:
        // no-op
    }

    visibleSlide.attr('src', slideList[currentSlideIndex]);
  }

});

See CodePen.

In the event that you don't have jQuery loaded onto the page, I've added it to the bottom of your HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>