addEventListener中if else条件失效：点击事件未独立触发求助

兄弟，我大概猜得到你代码里的问题出在哪了！先不说别的，你把<h1>和<h2>放在<head>标签里是不对的，这些可见内容应该放到<body>里，不过这不是导致点击异常的核心原因。

最可能的问题是你在处理点击事件时，没正确区分哪个元素被点击了，或者你的条件判断逻辑写错了，甚至可能给两个元素绑定事件时出了岔子。我给你梳理下常见的错误点和修复方案：

错误场景：条件判断没指向「被点击的元素」 #

如果你的changeText是两个元素共用的点击处理函数，那你得用事件的target属性来判断是谁被点击了，而不是直接去查元素是否存在。比如你原来的代码可能写了类似这样的错误逻辑：

// 错误示例！
function changeText() {
  if (document.getElementById("clickable1")) {
    document.getElementById("clickable1").textContent = text[0];
  } else if (document.getElementById("clickable2")) {
    document.getElementById("clickable2").textContent = text[1];
  }
}
// 然后给两个元素都绑了这个函数
document.getElementById("clickable1").onclick = changeText;
document.getElementById("clickable2").onclick = changeText;

这种写法里，if条件判断的是元素是否存在，而不是是否被点击——两个元素本来就都存在，所以每次点击时两个分支都会执行，导致两个文本同时被修改。

正确的修复方式 #

你需要在函数里拿到触发事件的元素，比如用event.target或者this来精准判断：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
</head>
<body>
<h1 id="clickable1"> Click me plz </h1> 
<h2 id="clickable2"> Click me too plz </h2> 
<script> 
var text = ["thanks for clicking first", "thanks for clicking second"];

function changeText(event) {
  // 用event.target拿到被点击的元素
  const clickedElement = event.target;
  if (clickedElement.id === "clickable1") {
    clickedElement.textContent = text[0];
  } else if (clickedElement.id === "clickable2") {
    clickedElement.textContent = text[1];
  }
}

// 给两个元素绑定点击事件
document.getElementById("clickable1").addEventListener('click', changeText);
document.getElementById("clickable2").addEventListener('click', changeText);
</script>
</body>
</html>

更简洁的替代方案：给每个元素绑定独立处理函数 #

如果你不需要共用一个函数，直接分开写会更清晰，完全避免条件判断的问题：

const clickable1 = document.getElementById("clickable1");
const clickable2 = document.getElementById("clickable2");

clickable1.addEventListener('click', () => {
  clickable1.textContent = text[0];
});

clickable2.addEventListener('click', () => {
  clickable2.textContent = text[1];
});

另外再提醒下，以后别把页面可见内容放到<head>里，<head>是放元数据、样式、脚本引用的地方，所有需要显示的内容都要放到<body>里哦！

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