JavaScript按钮绑定事件后变量为undefined，功能失效求助

我给按钮添加了事件监听器并赋值给变量，但按钮无法正常工作，控制台显示该变量为undefined且无代码报错。需求是点击按钮调用action函数实现两张图片的交换，但功能未实现，相关代码如下：

HTML代码 #

<div>
    <h3>ZooMoji</h3>
    <img src="moji1.jpg" id="pic1">
    <img src="moji2.jpg" id="pic2"> 
    <button value="button" id="myBtn">Click to See</button>
</div>

JavaScript代码 #

var swap1 = document.getElementById("pic1").src;
var swap2 = document.getElementById("pic2").src;
var btn = document.getElementById("myBtn").addEventListener("click", action);
    
function action() {
   if (swap1.endsWith("moji1.jpg") == true) {
    swap1.src = swap2;
   }
}

问题分析 #

1. swap1、swap2赋值错误：你直接把document.getElementById("pic1").src赋值给变量，此时变量存的是图片src的字符串值，而非img元素本身。后续在action函数里写swap1.src相当于给字符串添加属性，完全无效，且这个字符串是初始固定值，不会随图片src变化更新。
2. btn变量为undefined是正常现象：addEventListener方法本身返回undefined，所以把它赋值给btn，变量自然是undefined，这不是功能失效的原因。
3. action函数逻辑残缺：只处理了从moji1切换到moji2的情况，没有切换回去的逻辑，且没有操作真正的img元素src属性。

修复方案 #

让变量存储img元素本身，修改action函数逻辑实现双向交换：

// 存储img元素，而非src字符串
const pic1 = document.getElementById("pic1");
const pic2 = document.getElementById("pic2");
// 直接添加事件监听器，无需赋值给变量（返回值无意义）
document.getElementById("myBtn").addEventListener("click", action);

function action() {
    // 交换两个图片的src属性
    const tempSrc = pic1.src;
    pic1.src = pic2.src;
    pic2.src = tempSrc;
}

如果需要保留状态判断（比如仅在特定状态下切换），可以用以下写法：

const pic1 = document.getElementById("pic1");
const pic2 = document.getElementById("pic2");
// 保存初始路径，用于状态判断
const originalSrc1 = pic1.getAttribute("src");
const originalSrc2 = pic2.getAttribute("src");

document.getElementById("myBtn").addEventListener("click", action);

function action() {
    if (pic1.getAttribute("src") === originalSrc1) {
        pic1.src = originalSrc2;
        pic2.src = originalSrc1;
    } else {
        pic1.src = originalSrc1;
        pic2.src = originalSrc2;
    }
}

注：用getAttribute("src")可以获取HTML中写的相对路径，避免src属性返回完整URL导致endsWith判断失效的问题。

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