求助：鼠标事件触发后JavaScript值未更新问题

看起来你正在实现一个span标签的图片交互效果——默认显示一张图，悬停切换随机图，移出恢复，点击还要触发另一个随机切换。我来帮你补全并优化这段代码，让它完整运行起来！

1. 完整代码实现 #

HTML & CSS 部分 #

<style>
/* 基础样式：确保span能正常显示背景图 */
.img {
  display: inline-block;
  width: 200px; /* 根据你的实际图片尺寸调整 */
  height: 200px;
  background-size: cover;
  background-position: center;
  cursor: pointer; /* 给用户可点击的视觉提示 */
}
/* 默认显示的图片 */
.img1 {
  background-image: url('default.jpg');
}
</style>

<span class="img1 img" id="new-img"> </span>

JavaScript 部分 #

// 集中管理所有图片路径，后期修改更方便
const hoverImageList = ['hover-1.jpg', 'hover-2.jpg', 'hover-3.jpg'];
const clickImageList = ['click-1.jpg', 'click-2.jpg', 'click-3.jpg'];
const defaultImageUrl = 'default.jpg';
const targetSpan = document.getElementById('new-img');

// 鼠标悬停：切换随机悬停图片
function numberOne() {
  // 生成0-2的随机索引，对应数组里的3张图
  const randomIdx = Math.floor(Math.random() * hoverImageList.length);
  targetSpan.style.backgroundImage = `url('${hoverImageList[randomIdx]}')`;
}

// 鼠标移出：恢复默认图片
function noHoverOne() {
  targetSpan.style.backgroundImage = `url('${defaultImageUrl}')`;
}

// 点击：切换随机点击图片
function imgNumber() {
  const randomIdx = Math.floor(Math.random() * clickImageList.length);
  targetSpan.style.backgroundImage = `url('${clickImageList[randomIdx]}')`;
}

// 把事件监听移到JS中（解耦HTML和JS，更符合现代开发规范）
targetSpan.addEventListener('mouseover', numberOne);
targetSpan.addEventListener('mouseout', noHoverOne);
targetSpan.addEventListener('click', imgNumber);

2. 关键细节说明 #

• CSS必须项：span默认是行内元素，必须设置display: inline-block和固定宽高，否则背景图无法正常显示。
• 图片路径管理：用数组存图片路径比直接拼接随机数更灵活，比如后期要加图片，只需要在数组里新增路径即可。
• 事件监听优化：把onmouseover这类内联事件移到JS中绑定，让HTML结构更简洁，也便于后续维护事件逻辑。

3. 可选优化：预加载图片 #

如果图片尺寸较大，切换时可能出现加载延迟，可以提前预加载所有图片：

// 预加载图片函数
function preloadImages(imgUrlArray) {
  imgUrlArray.forEach(url => {
    const img = new Image();
    img.src = url;
  });
}

// 预加载所有需要用到的图片
preloadImages([...hoverImageList, ...clickImageList, defaultImageUrl]);

内容的提问来源于stack exchange，提问作者web-stars