JavaScript技术咨询：点击事件同时切换图片源与显示按钮

完整代码示例 #

HTML部分 #

<!-- 点击此图片触发操作 -->
<img id="mainImg" src="初始图片路径.jpg" alt="初始图片">
<!-- 初始状态隐藏的按钮 -->
<button id="actionBtn" style="display: none;">操作按钮</button>

JavaScript部分 #

// 获取页面中的DOM元素
const mainImg = document.getElementById('mainImg');
const actionBtn = document.getElementById('actionBtn');

// 给图片绑定点击事件
mainImg.addEventListener('click', function() {
  // 1. 更换图片的src属性
  this.src = '新图片路径.jpg';
  // 2. 修改按钮的显示状态
  actionBtn.style.display = 'block';
});

原理说明 #

• 事件绑定：通过addEventListener给图片元素绑定click事件，用户点击图片时会自动执行回调函数里的代码。
• 更换图片：直接修改DOM元素的src属性，浏览器会自动加载并展示新地址对应的图片。
• 显示按钮：按钮初始通过style="display: none;"设置为隐藏状态，点击时将其style.display改为block（或inline-block等符合布局需求的值），就能让按钮显示出来。

更易维护的写法（用CSS类控制显示） #

如果想让样式和逻辑分离，也可以用CSS类来管理隐藏状态：

<style>
.hidden {
  display: none;
}
</style>

<img id="mainImg" src="初始图片路径.jpg" alt="初始图片">
<button id="actionBtn" class="hidden">操作按钮</button>

const mainImg = document.getElementById('mainImg');
const actionBtn = document.getElementById('actionBtn');

mainImg.addEventListener('click', function() {
  this.src = '新图片路径.jpg';
  // 移除hidden类，按钮自动显示
  actionBtn.classList.remove('hidden');
});

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