jQuery click event not fired when element clicked

I've seen this question asked and answered before but after trying several proposed solutions I still haven't had any luck.

I have four buttons ( respectively with IDs "frst, prev, next, last,") None of them do anything when clicked. Currently the part of my code that isn't working looks like so:


const index = ['imgs/1.png', 'imgs/2.png', 'imgs/3.png', 'imgs/4.png', 'imgs/5.png'];

let current = index.length;

$(document).ready(function(){
   $(document).on('click', '#frst', function(){
        current = 1;
        funcUpdate();
    });

    $(document).on('click', '#prev', function(){
        current--;
        funcUpdate();
    });

    $(document).on('click', '#next', function(){
        current++;
            funcUpdate();
    });

    $(document).on('click', '#last', function(){
        current = index.length;
        funcUpdate();
    });

});

function funcUpdate() {
    $('#img').attr('src', index[current - 1]);;
    $('button').removeAttr('disabled');

    if (current == 1) {
        $('.back').attr('disabled', '1');
    }
    else if (current == index.length) {
        $('.frwd').attr('disabled', '1');
    }
}

My html looks like this:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script src="imgs.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    </head>
    <body>
            <div>
                <img id="img" src="imgs/5.png"/>
                <div class="center">
                    <button type="button" class="back" id="frst">🞀🞀</button>
                    <button type="button" class="back" id="prev">🞀</button>
                    <button type="button" class="frwd" id="next">🞂</button>
                    <button type="button" class="frwd" id="last">🞂🞂</button>
                </div>
            </div>
        </main>
     </body>
</html>

funcUpdate is meant to switch out the displayed image and disable buttons so you can't go outside the values currently in the array. When I don't use jQuery, like below, it works as intended.

<button class="back" onclick="funcFrst()">first</button>
<button class="back" onclick="funcPrev()">previous</button>
<button class="back" onclick="funcNext()">next</button>
<button class="back" onclick="funcLast()">last</button>

With code in imgs.js like so:

function funcFrst() {
    current = 1;
    funcUpdate();
}

function funcPrev() {
    current--;
    funcUpdate();
}

function funcNext() {
    current++;
    funcUpdate();
}

function funcLast() {
    current = index.length;
    funcUpdate();
}

In both cases, the js is in imgs.js.

I've also tried $('#ID').click and $('#ID').on('click', function(){});, each in and outside of $(document).ready with no luck. I've also seen it suggested to put the script below the buttons that call it, which also didn't work.

I bet it's probably some really obvious error I've overlooked but I figured I'd ask anyway.

Solution

a) You need to add the base jQuery library before any other third-party/local jQuery library file, then only your jQuery code will run. So swap the position of 2 js files added.

b) Instead of adding and removing, toggle the disabled property on the buttons

c) You need to modify funcUpdate() like below:

function funcUpdate(buttonObj) {
    $('#img').attr('src', index[current - 1]);
    $(".back").prop("disabled", function(i, val) {
        return (current == 1);
    });
    $('.frwd').prop("disabled", function(i, val) {
        return (current == index.length);
    });
}

Working snippet:

let current = 1;
const index = ['https://imageio.forbes.com/specials-images/imageserve/5faad4255239c9448d6c7bcd/Best-Animal-Photos-Contest--Close-Up-Of-baby-monkey/960x0.jpg?format=jpg&width=960', 'https://hips.hearstapps.com/hmg-prod/images/baby-animal-photos-65f9bc47971de.jpg', 'https://hips.hearstapps.com/hmg-prod/images/baby-animals-hedgehog-65f8af918f516.jpg?crop=0.6643126177024482xw:1xh;center,top&resize=980:*', 'https://cdn.firstcry.com/education/2022/11/26141737/Animal-Name-Starting-With-L-For-Kids.jpg', 'https://image.shutterstock.com/image-photo/two-little-funny-baby-goats-260nw-2140138487.jpg'];
$(document).ready(function() {
  $('#frst').click(function() {
    current = 1;
    funcUpdate();
  });

  $('#prev').click(function() {
    current--;
    funcUpdate();
  });

  $('#next').click(function() {
    current++;
    funcUpdate();
  });

  $('#last').click(function() {
    current = index.length;
    funcUpdate();
  });

});

function funcUpdate(buttonObj) {
  $('#img').attr('src', index[current - 1]);

  $(".back").prop("disabled", function(i, val) {
    return (current == 1);
  });
  $('.frwd').prop("disabled", function(i, val) {
    return (current == index.length);
  });
}

#img {
  height: 200px;
  width: 200px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="imgs.js"></script>
</head>

<body>
  <div>
    <img id="img" src="https://imageio.forbes.com/specials-images/imageserve/5faad4255239c9448d6c7bcd/Best-Animal-Photos-Contest--Close-Up-Of-baby-monkey/960x0.jpg?format=jpg&width=960" />
    <div class="center">
      <button type="button" class="back" id="frst">🞀🞀</button>
      <button type="button" class="back" id="prev">🞀</button>
      <button type="button" class="frwd" id="next">🞂</button>
      <button type="button" class="frwd" id="last">🞂🞂</button>
    </div>
  </div>
  </main>
</body>

</html>