Как установить индекс, выбрав в 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>

Пожалуйста, обновите демо-версию выше, чтобы она отображала вашу проблему. Совет: используйте let и const в 2024 году вместо var.

isherwood 17.05.2024 22:56

Когда я запускаю ваш фрагмент, нажатие на кнопку регистрирует ожидаемое solutionIndex. Как вы думаете, почему индекс неправильный?

Barmar 17.05.2024 23:02

С какой кнопкой проблема? На главной странице есть 6 кнопок «Обнаружить». Вы также упоминаете кнопку «Обнаружить» на странице, на которую она перенаправляет (в iframe). Если проблема связана с этой кнопкой, вам необходимо опубликовать этот код.

Barmar 17.05.2024 23:04

Вы можете добавить индекс кнопки в качестве параметра в URL-адрес источника iframe.

Barmar 17.05.2024 23:05

Javascript и веб-разработка вообще не моя сфера. Я больше занимаюсь искусственным интеллектом и наукой о данных, но это веб-страница, на которой должно отображаться 6 вариантов использования ИИ, по сути, у меня на домашней странице есть 6 вариантов использования, каждый из которых имеет свою страницу с кнопка «Обнаружить», которая отображает демо-версию. Моя проблема теперь в том, что какой бы вариант использования я ни нажимал, он всегда отображает одну и ту же демонстрацию в iframe, я не знаю, почему

Asser 17.05.2024 23:08

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

Asser 17.05.2024 23:11

Я добавил фотографии для помощи

Asser 17.05.2024 23:21

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

mykaf 17.05.2024 23:23

В вашем примере индексная переменная, созданная в обратном вызове forEach, доступна в обратном вызове обработчика событий click из-за вещи в JS (и некоторых других языках), называемой «замыканием». Итак, как сказал Бармар, журнал получает правильный индекс. Если вы хотите предотвратить ошибку, которую он выдает, вам нужно определить что-то для каждого индекса, например, больше анонимных пустых объектов ([{}, {}, {}, {}, {}, {}]).

l3l_aze 17.05.2024 23:45
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
9
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Судя по предоставленному вами фрагменту кода, строка 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>

Другие вопросы по теме