javascript - javascript onclick递减问题

Question

我正在尝试在完成一个所有幻灯片放映后制作图像幻灯片放映，当我可以单击后退按钮时它显示未定义

请检查此功能 prevFun。

const slide = document.querySelector("#imgSlide");
const img = ["a", "b", "c", "d"];
const img_Length = img.length;
var i = 1;
const nextFun = () => {
  if (i < img_Length) {
    slide.src = `images/${img[i]}.jpg`;
    i++;
    console.log(i);
  }
};
const prevFun = () => {
  if (i < 0) {
    return;
  } else if (i <= img.length) {
    slide.src = `images/${img[i]}.jpg`;
    i--;
    console.log(i);
  }
};

<div class="images">
  <img src="images/a.jpg" alt="img" id="imgSlide" />
  <div class="controls">
    <div class="left" onclick="prevFun()">
      <</div>
        <div class="right" onclick="nextFun()">></div>
    </div>
  </div>

标签： javascript

Answer 1

似乎工作。这些结果不是你所期望的吗？

const img = ["a", "b", "c", "d"];
let i = 1;

function increment() {
  if(i >= img.length) return i;
  return ++i;
}

function decrement() {
  if (i < 1) return i;
  if (i <= img.length) {
    return --i;
  }
}

console.log(increment()); // 2
console.log(increment()); // 3
console.log(decrement()); // 2
console.log(decrement()); // 1
console.log(decrement()); // 0
console.log(decrement()); // 0
console.log(decrement()); // 0
console.log(decrement()); // 0
console.log(increment()); // 1
console.log(increment()); // 2
console.log(increment()); // 3
console.log(increment()); // 4
console.log(increment()); // 4
console.log(increment()); // 4
console.log(increment()); // 4