Javascript 如果else条件不起作用，则添加EventListener_Javascript_Dom Events_Addeventlistener

Javascript 如果else条件不起作用，则添加EventListener

javascript

Javascript 如果else条件不起作用，则添加EventListener,javascript,dom-events,addeventlistener,Javascript,Dom Events,Addeventlistener,我不明白为什么第二个条件不起作用（否则，如果在函数内changeText）当我单击时，它会同时更改我的clickable1和clickable2，而不是单独处理每次单击我的代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <h1 id="clickable1"> Click me plz </h1> <h2 i

我不明白为什么第二个条件不起作用（否则，如果在函数内

changeText

）

当我单击时，它会同时更改我的clickable1和clickable2，而不是单独处理每次单击

我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<h1 id="clickable1"> Click me plz </h1>
<h2 id="clickable2"> Click me too plz </h2>
<script>
var text = ["thanks for clicking first", "thanks… but why only second?"];
var index = 0;
var indexId = 0;
document.getElementById("clickable1").addEventListener("click",changeText);
document.getElementById("clickable2").addEventListener("click",changeText);

function changeText(){
  if(document.getElementById("clickable1")){
    document.getElementById("clickable1").innerHTML = text[0];
  }
    else if(document.getElementById("clickable2")){
      document.getElementById("clickable2").innerHTML = text[1];
  }
}
</script>
</head>
<body>

</body>
</html>


点击我plz
也请点击我
var text=[“感谢您首先单击”，“谢谢…但为什么只单击第二个？”；
var指数=0；
var-indexId=0；
document.getElementById（“clickable1”）。addEventListener（“click”，changeText）；
document.getElementById（“clickable2”）。addEventListener（“click”，changeText）；
函数changeText（）{
if（document.getElementById（“clickable1”））{
document.getElementById（“clickable1”）.innerHTML=text[0]；
}
else if（document.getElementById（“clickable2”））{
document.getElementById（“clickable2”）.innerHTML=text[1]；
}
}

井，条件

if(document.getElementById("clickable2"))

只需检查是否存在具有

clickable2

id属性的

DOM

元素

问题的一个解决方案可能是将事件参数传递给函数

function changeText(event){

然后只需使用

event.target

属性，即可找到触发

单击事件处理程序的控件
此外，您的代码还可以通过使用三元
运算符来简化：
function changeText(event){
     id = event.target.id
     document.getElementById(id).innerHTML = id == 'clickable1' ? text[0] : test[1];
}

测试if（document.getElementById（“clickable1”）
将：
调用getElementById

这将计算为null
（如果元素不存在）或元素（如果存在）
测试以查看该值是否为真值（元素为，null
不是）
您的测试与确定单击了哪个按钮无关，仅当该按钮存在于文档中时
此
将是附加事件处理程序的元素，因此您可以将其与按钮进行比较
if (document.getElementById("clickable1") === this){

同时，事件对象将告诉您实际单击了哪个元素，因此您可以执行以下操作：
function changeText(evt){
    if (document.getElementById("clickable1") === evt.target)

…当您使用时，这种方法会更好，因为它允许您将事件处理程序绑定到一个元素，该元素是可能被单击的元素的祖先
但这是一种更复杂的方法，您必须考虑以下情况：
<button> a <span>b</span> c </button>

abc

…单击按钮中的b
将为您提供
元素的事件目标。
您的第二个条件永远不会运行，因为第一个条件始终为真。您正在检查DOM中是否有ID等于clickable1
的元素。这永远是真的。这就是为什么它永远不会进入其他领域，如果
您可以做的是检查单击的元素ID

var text=[“感谢您首先单击”，“谢谢…但为什么只单击第二个？”；
var指数=0；
var-indexId=0；
document.getElementById（“clickable1”）。addEventListener（“click”，changeText）；
document.getElementById（“clickable2”）。addEventListener（“click”，changeText）；
函数changeText（事件）{
如果（event.target.id==“clickable1”）{
document.getElementById（“clickable1”）.innerHTML=text[0]；
}
否则如果（event.target.id==“clickable2”）{
document.getElementById（“clickable2”）.innerHTML=text[1]；
}
}

点击我plz
也请点击我
如果（document.getElementById（“clickable1”）{document.getElementById（“clickable1”）.innerHTML=text[0]；}
在搜索ID时没有那么糟糕，没有理由在这里浪费CPU精力。使用一个变量，比如：var clickable1=document.getElementById（“clickable1”）；如果（clickable1）{clickable1.innerHTML=text[0]；}