按钮点击时如何正确校验HTML对象的data与变量值相等？

安全阿岳

2026-5-15

问题分析与修复方案

嘿，我一眼就瞅出你代码里的问题啦！导致不管判断逻辑对不对都执行alert的核心原因，是你在条件判断里用错了运算符。

错误根源

看你这段判断代码：

if (FL1 = Data) { alert("Test Successful"); }

这里的=是赋值运算符，不是用来判断相等的！它会把Data的值'FL1.png'直接塞给FL1，然后这个赋值操作的结果就是'FL1.png'——在JavaScript里，非空字符串会被当作true处理，所以这个条件永远成立，自然每次点按钮都会弹提示。

两步修复搞定问题

把赋值改成相等判断：要用===（严格相等，同时检查值和数据类型，推荐用这个，避免类型转换坑）或者==（宽松相等）来做判断。
修正data属性的获取方式：原生DOM元素根本没有.data这个属性哦！如果你的HTML元素是用data-*自定义属性存值的（比如<div id="FL1Object" data-img="FL1.png"></div>），得用正确的方式获取：
- 用dataset：document.getElementById("FL1Object").dataset.img（对应HTML里的data-img属性）
- 用getAttribute：document.getElementById("FL1Object").getAttribute('data-img')

修复后的完整代码

// 正确获取data属性值（这里假设你的属性是data-img，记得根据实际情况修改）
var FL1 = document.getElementById("FL1Object").dataset.img; 
// 或者用 getAttribute：var FL1 = document.getElementById("FL1Object").getAttribute('data-img');
var targetImg = 'FL1.png'; // 改个更清晰的变量名

document.getElementById("FLLeftBtn").onclick = function() {
  FLLeftBtnClicked();
};

function FLLeftBtnClicked() {
  // 用===做严格相等判断
  if (FL1 === targetImg) { 
    alert("Test Successful");
  } else {
    alert("Test Failed"); // 加个失败提示，方便你调试
  }
}