Как установить индекс, выбрав в JavaScript

домашняя страница I вторая страница есть домашняя страница, на которой отображается 6 кнопок. Каждая кнопка направляет меня на другую страницу, где есть некоторая информация и кнопка «Открыть». Обычно каждая кнопка должна направлять меня на определенную ссылку, но у меня проблема в том, что мой индекс всегда равен 0 и не меняется.

Я хочу, чтобы индекс зависел от решения, которое пользователь выбирает на домашней странице.

const solutions = [{}];

document.querySelectorAll('.discover-button').forEach(function(button, index) {
  button.addEventListener('click', function(event) {
    var solutionIndex = index; console.info(solutionIndex);
    var videoIframe = document.getElementById('videoIframe');
    var videoUrl = solutions[solutionIndex].url;
    videoIframe.src = videoUrl;

    document.getElementById('iframeContainer').style.display = 'block';
  });
});

function closeIframe() {
  var videoIframe = document.getElementById('videoIframe');
  videoIframe.src = '';
  document.getElementById('iframeContainer').style.display = 'none';
}

<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>

<div class = "iframe-container" id = "iframeContainer">
  <button class = "close-iframe" onclick = "closeIframe()">X</button>
  <iframe id = "videoIframe" title = "Video presentation"></iframe>
</div>

🤔 А знаете ли вы, что...
JavaScript поддерживает работу с куки и хранилищем веб-браузера для сохранения данных на клиентской стороне.

[РЕШЕНО]Перейти к решению

Javascript273878 вопросов Html113619 вопросов Css75481 вопрос

Ответ:

Решено

Судя по предоставленному вами фрагменту кода, строка 5 правильно регистрирует solutionIndex, но строка 7 пытается получить доступ к элементу за пределами диапазона solutions.

Как упоминал микаф в комментариях,

Вторым аргументом forEach() всегда будет индекс элемента в объекте, похожем на массив, который вы выполняете итерацию.

Добавление элемента url к каждому объекту и как минимум шести объектов в массив solutions должно работать нормально:

const solutions = [
  {
    url: "https://loremflickr.com/680/800/atm,bank,money"
  },
  {
    url: "https://loremflickr.com/680/800/water,river,ocean,blue"
  },
  {
    url: "https://loremflickr.com/680/800/rodent,mouse,gerbil"
  },
  {
    url: "https://loremflickr.com/680/800/grafitti"
  },
  {
    url: "https://loremflickr.com/680/800/debian,nature"
  },
  {
    url: "https://loremflickr.com/680/800/sock,shoe"
  },
];

document.querySelectorAll('.discover-button').forEach(function(button, index) {
  button.addEventListener('click', function(event) {
    var solutionIndex = index; console.info(solutionIndex);
    var videoIframe = document.getElementById('videoIframe');
    var videoUrl = solutions[solutionIndex].url;
    videoIframe.src = videoUrl;

    document.getElementById('iframeContainer').style.display = 'block';
  });
});

function closeIframe() {
  var videoIframe = document.getElementById('videoIframe');
  videoIframe.src = '';
  document.getElementById('iframeContainer').style.display = 'none';
}

<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>
<button class = "discover-button">Discover</button>

<div class = "iframe-container" id = "iframeContainer">
  <button class = "close-iframe" onclick = "closeIframe()">X</button>
  <iframe id = "videoIframe" title = "Video presentation"></iframe>
</div>

Как установить индекс, выбрав в JavaScript

Ответ:

Интересные вопросы для изучения