Поместите изображение на первую страницу на второй странице javascript

Итак, моя проблема в том, что у меня есть две страницы products.html и index.html. на products.html у меня есть несколько изображений и кнопка рядом с каждым изображением, и каждая кнопка соответствует каждому изображению, и когда вы нажимаете кнопку, она ссылается на index.html, а на index.html у меня есть 1 изображение. Я хочу сделать так, чтобы каждый раз, когда я нажимаю кнопку, я попадал на страницу index.html, а соответствующее изображение на products.html помещалось на изображение index.html.

<div class = "imgbx">
    <button onclick = "window.location.href='index.html'" >Invisible button</button>
    <img src = "images/xr-black.jpg" alt = "">
</div>

Отвечает ли это на ваш вопрос? передача данных формы на другую HTML-страницу

Richard Muvirimi 20.03.2022 11:19

это не форма а кнопка

Enio 20.03.2022 11:30

это та же концепция, ссылка будет содержать информацию, которую следующая страница может использовать для отображения своего контента, когда-либо виденного http://example.com?param1=value1&param2=value2 работает также в href, оформленном как кнопка

Richard Muvirimi 20.03.2022 11:35

Трудно обойтись без какого-либо языка бэкенда, такого как php, asp или java. Вам нужно прочитать параметр URL, как сказал @RichardMuvirimi, и на его основе вам нужно создать html для index.html. Если вы хотите сделать только javascript на стороне браузера, это также возможно, но в этом случае вам нужно подумать намного больше.

Vinay 20.03.2022 15:46
Поведение ключевого слова "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) для оценки ваших знаний,...
1
4
40
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Внутри products.html добавьте

<div class = "imgbx">
    <button onclick = "window.location.href='index.html?image=images/xr-black.jpg'" >Invisible button</button>
    <img src = "images/xr-black.jpg" alt = "">
</div>

В вашем main.html добавьте

<img src = "img" id = "image">
<script>
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const image = urlParams.get('image')
    document.getElementById('image').src = image;

</script>

Голосовать было бы полезно

Sheikh Haziq 21.03.2022 18:37

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