点击图片将其设为指定div背景图的JavaScript实现问题排查

你说的没错，问题确实出在this的指向以及代码里的小细节上！我来帮你一步步分析和修复：

问题根源 #

1. this指向错误：当你用内联onclick="showslide()"调用函数时，函数内部的this默认指向全局的window对象，而不是你点击的那张图片，所以z = this.src会拿到undefined，根本没法正确获取图片地址。
2. 属性名错误：你设置背景图时写的是y.backgroundImage，但DOM元素的样式需要通过style属性访问，正确的写法是y.style.backgroundImage。
3. 未声明变量：代码里的y、z没有用var/let/const声明，会自动变成全局变量，这是不规范的写法，容易引发意外问题。

方案1：快速修复内联调用（适合简单场景） #

直接在onclick中传递当前图片的引用，同时修正样式属性的写法：

修复后的JavaScript代码

function showslide(imgElement) {
  // 用const声明变量，避免全局污染
  const slidesDiv = document.getElementById("slides");
  slidesDiv.style.display = "block";
  // 正确设置背景图，使用模板字符串更简洁
  slidesDiv.style.backgroundImage = `url(${imgElement.src})`;
}

修复后的HTML代码

<div id="slides">Div</div>
<div id="slidermenu">
  <img class="slidermenuimage" src="https://placehold.co/600x400/red/white" onclick="showslide(this)"/><br>
  <img class="slidermenuimage" src="https://placehold.co/600x400/orange/white" onclick="showslide(this)"/><br>
  <img class="slidermenuimage" src="https://placehold.co/600x400/yellow/white" onclick="showslide(this)"/><br>
</div>

这里在onclick中传入this（即当前点击的图片元素），函数接收后直接使用它的src属性，就能正确获取图片地址了。

方案2：使用事件监听（推荐，现代JS规范） #

内联事件不利于代码分离和维护，推荐用addEventListener绑定事件，这种方式下this会自动指向触发事件的元素：

JavaScript代码

// 确保DOM加载完成后再执行绑定
document.addEventListener('DOMContentLoaded', function() {
  const slidesDiv = document.getElementById("slides");
  // 获取所有菜单图片
  const menuImages = document.querySelectorAll('.slidermenuimage');
  
  // 为每张图片绑定点击事件
  menuImages.forEach(img => {
    img.addEventListener('click', function() {
      slidesDiv.style.display = "block";
      // 这里的this就是当前点击的图片元素
      slidesDiv.style.backgroundImage = `url(${this.src})`;
    });
  });
});

HTML代码（移除内联onclick）

<div id="slides">Div</div>
<div id="slidermenu">
  <img class="slidermenuimage" src="https://placehold.co/600x400/red/white"/><br>
  <img class="slidermenuimage" src="https://placehold.co/600x400/orange/white"/><br>
  <img class="slidermenuimage" src="https://placehold.co/600x400/yellow/white"/><br>
</div>

这种方式将JS逻辑与HTML结构完全分离，代码更清晰，也更易于后续扩展和维护。

备注：内容来源于stack exchange，提问作者goo