基于JavaScript实现点击按钮切换对应开关图片的功能调整需求

需求说明 #

• 点击「on」按钮：显示pump on.gif图片，同时隐藏pump off.png图片
• 点击「off」按钮：隐藏pump on.gif图片，同时显示pump off.png图片

现有代码仅完成了部分功能，以下是完善后的完整代码：

<button id="show-image-button" style="--clr:#0FF0FC"><span>on</span><i></i></button>
<br>
<button id="hide-image-button" style="--clr:#0FF0FC"><span>off</span><i></i></button>
<br>
<img id="my-image" src="pump on.gif" alt="anim" style="text-align: center; justify-content:center;display: none;width:130px;height:130px;">
<br>
<img id="off-image" src="pump off.png" alt="anima" style="display: none;width:120px;height:100px;">
<br>

<script>
const showImageButton = document.getElementById("show-image-button");
const hideImageButton = document.getElementById("hide-image-button");
const onImage = document.getElementById("my-image");
const offImage = document.getElementById("off-image");

// On按钮点击逻辑
showImageButton.addEventListener("click", () => {
  onImage.style.display = "block";
  offImage.style.display = "none";
});

// Off按钮点击逻辑
hideImageButton.addEventListener("click", () => {
  onImage.style.display = "none";
  offImage.style.display = "block";
});
</script>

关键改动说明 #

• 给「pump off.png」的图片添加了id="off-image"，便于JavaScript精准获取元素
• 移除了原代码中混用的visibility属性，统一使用display控制显示/隐藏，避免元素占位导致的布局问题
• 完善了两个按钮的点击逻辑，确保每次点击都同时处理两张图片的显示状态
• 统一使用addEventListener绑定事件，替代原代码中混合使用onclick和addEventListener的写法，代码结构更清晰规范

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