Увеличение переменной по клику

Question

Я пытаюсь построить ванильную карусель.Я хочу постепенно увеличивать или уменьшать переменную onClick, но я получаю неопределенную проблему.Если я встраиваю код в файл HTML, все работает нормально, когда я перемещаю его во внешний файл js, я получаю неопределенную ошибку.Я чувствую, что мне не хватает какой-то информации о сфере.

let i = 0;

function carouselControl() {
  console.log(i);
}

<div class="container">
  <div class="carousel">
    <a onclick="carouselControl(i--);">
      <div class="carousel__control"><img src="https://upload.wikimedia.org/wikipedia/commons/0/0d/Caret_left_font_awesome.svg"></a>
    </div>
    <div class="carousel__img"><img src="https://picsum.photos/1125/750"></div>
    <div class="carousel__img hidden"><img src="https://picsum.photos/1126/750"></div>
    <div class="carousel__img hidden"><img src="https://picsum.photos/1127/750"></div>
    <a onclick="carouselControl(i++);">
      <div class="carousel__control"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Caret_right_font_awesome.svg"></a>
    </div>
  </div>
</div>

Answer 1

Вы пытаетесь отправить переменную, которая неизвестна в первом файле, также вы не определили, что carouselControl() получит любые переменные с вызовом функции. Что вы можете сделать, это:

let i = 0;

function carouselControl(condition) {
  if(condition == 1) // increasing the "i" value
    i++;
  else if ( condition == 0) // decreasing the "i" value
    i--;
  console.log(i);
}

и в первом файле вам просто нужно изменить carouselControl(i--) на carouselControl(1) для кнопки, для которой вы хотите увеличить число, и carouselControl(0) для кнопки, для которой вы хотите уменьшить число.

Answer 2

Ваша carouselControl функция не ожидает каких-либо параметров (часть в скобках).

Когда вы вызываете свою функцию в HTML onclick, вы передаете фактический код в части параметров.

Измените свою функцию на что-то вроде:

function carouselControl(operation){
    if (operation == "increase") i++;
    if (operation == "decrease") i--;
}

А в вашем HTML сделайте:

<a onclick="carouselControl("decrease");"><div class="carousel__control"><img src="../img/symbols/left.svg"></a></div>

<a onclick="carouselControl("increase");"><div class="carousel__control"><img src="../img/symbols/right.svg"></a></div>