如何用JavaScript将点击选中的图片传递至另一HTML页面并展示？

需求概述 #

首个HTML页面包含图片轮播组件，要求用户点击任意轮播图片后，自动跳转至第二个HTML页面，并在该页面展示用户选中的图片。

原代码实现 #

选图页面JavaScript代码 #

var whichImages;

function displayImage(){

    document.getElementsByClassName("image").onclick = whichImages;
    return whichImages.join('');
}

sessionStorage.setItem(whichImages);

展示页面JavaScript代码 #

var mainChar = sessionStorage.getItem(whichImages);

function showImage2(){
  document.getElementById("img") = mainChar; 
}

showImage2();

代码问题分析与修正方案 #

选图页面的核心问题 #

1. 元素集合绑定事件错误：getElementsByClassName返回的是HTMLCollection元素集合，无法直接给整个集合绑定onclick，必须遍历每个元素单独绑定事件。
2. 变量未初始化与赋值：whichImages未定义初始值，也没有在点击事件中捕获选中图片的信息（比如图片地址）。
3. sessionStorage使用错误：setItem方法需要传入键名和键值两个参数，原代码仅传入未定义的变量。
4. 缺少页面跳转逻辑：点击图片后没有触发跳转至展示页面的操作。

修正后的选图页面代码：

// 获取所有带"image"类的轮播图片
const imageElements = document.getElementsByClassName('image');

// 遍历每个图片，绑定点击事件
for (const img of imageElements) {
  img.addEventListener('click', function() {
    // 将选中图片的地址存入sessionStorage，键名设为"selectedImage"
    sessionStorage.setItem('selectedImage', this.src);
    // 跳转到展示页面，替换为你的展示页面实际路径
    window.location.href = 'image-display.html';
  });
}

展示页面的核心问题 #

1. sessionStorage取值错误：getItem需要传入对应的键名，原代码传入未定义的whichImages变量，无法获取存储的信息。
2. DOM元素赋值错误：不能直接给DOM元素赋值，需要修改其src属性来设置图片地址。

修正后的展示页面代码：

function showSelectedImage() {
  // 通过键名获取存储的图片地址
  const selectedSrc = sessionStorage.getItem('selectedImage');
  const displayImg = document.getElementById('img');
  
  if (selectedSrc && displayImg) {
    // 设置图片元素的src属性，展示选中的图片
    displayImg.src = selectedSrc;
  }
}

// 等待页面DOM加载完成后执行展示逻辑
window.addEventListener('load', showSelectedImage);

内容的提问来源于stack exchange，提问作者Felix