Блог

заранее благодарю вас за помощь! Пожалуйста, простите меня, если это глупый вопрос, так как я новичок в JS.

Я пытаюсь перебрать массив URL-адресов, которые я вложил внутрь объекта. Чего я ожидаю, так это того, что URL-адреса (которые являются картами Google) будут отображаться на моем веб-сайте, а человек, использующий мой веб-сайт, сможет переходить между разными URL-адресами карты. Прямо сейчас происходит то, что последний элемент (URL-адрес Google maps) myCities.index отображается правильно, но когда я нажимаю кнопки «Предыдущий» и «Следующий», он переходит на пустую страницу. Я просмотрел свою консоль JS, и там нет никаких видимых ошибок. Кто-нибудь может дать мне несколько советов, как это исправить? Мой код выглядит следующим образом.

 const myCities = {
  index:
    [url1, url2, url3]
}

const prevButton = document.querySelector('.prevBtn');
const nextButton = document.querySelector('.nextBtn');
const map = document.getElementById("myCitiesss");

nextButton.addEventListener('click', nextCity);
prevButton.addEventListener('click', prevCity);

function prevCity() {
  myCities.index--;
  updateSrc();
  checkButtons();
}

function nextCity() {
  myCities.index  ;
  updateSrc();
  checkButtons();
 }

function updateSrc() {
  map.src = myCities.index;
}

function checkButtons() {
  prevButton.disabled = false;
    nextButton.disabled = false;  
  if (myCities.index === 2) {
    nextButton.disabled = true;
  }if (myCities.index === 0) {
prevButton.disabled = true;
}

}

updateSrc();
checkButtons();
 

Проблема в том, что вы обрабатываете myCities.index как контейнер ваших данных, так и счетчик (следовательно, вы выполняете операции увеличения / уменьшения над ним).

Счетчик должен быть отдельной переменной.

 const myCities = [url1, url2, url3]; //<-- can now be a flat array
let index = 0; //<-- this is our counter, i.e. tracker
 

Затем соответствующие изменения в коде: (Я также воспользовался возможностью, чтобы продемонстрировать некоторые оптимизации и повышения эффективности, которые вы можете внести)

 nextButton.addEventListener('click', () => nextPrevCity('next'));
prevButton.addEventListener('click', () => nextPrevCity('prev'));

function nextPrevCity(which) { //<-- one function to handle both next and prev
    which == 'next' ? index   : index--;
    map.src = myCities[index];
    checkButtons();
}

function checkButtons() {
    prevButton.disabled = false;
    nextButton.disabled = false;  
    if (index === myCities.length - 1) //<-- check against array length, not fixed number 2
        nextButton.disabled = true;
    if (!index) //<-- because 0 is a falsy value, so same as "if (index === 0)"
        prevButton.disabled = true;
}
 

[ — РЕДАКТИРОВАТЬ — ]

Забыл следующее в нижней части кода:

 map.src = myCities[0];
checkButtons();