Question

我不明白为什么第二个条件不起作用（否则如果在函数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>

感谢的。

Answer 1

好吧，条件

if(document.getElementById("clickable2"))

只检查DOM元素是否存在clickable2 id属性。

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

function changeText(event){

然后只使用event.target属性来找出触发click事件处理程序的控件。

此外，您可以使用ternary运算符简化代码：

function changeText(event){
     id = event.target.id
     document.getElementById(id).innerHTML = id == 'clickable1' ? text[0] : test[1];
}

Answer 2

测试if (document.getElementById("clickable1"))将：

致电getElementById
这将评估为null（如果元素不存在）或元素（如果它存在）。
测试是否为真值（元素为，null不是）。

您的测试与确定单击哪个按钮无关，只有在文档中存在该按钮时才会进行。

this将是附加事件处理程序的元素，因此您可以将其与按钮进行比较......

if (document.getElementById("clickable1") === this){

同时，事件对象会告诉你实际点击了哪个元素，所以你可以这样做：

function changeText(evt){
    if (document.getElementById("clickable1") === evt.target)

...当您使用event delegation时，这种方法会更好，因为它允许您将事件处理程序绑定一次到一个元素，该元素是可能被点击的元素的祖先。< / p>

这是一种更复杂的方法，您必须考虑以下情况：

<button> a <span>b</span> c </button>

...点击按钮中的b会为您提供<span>元素的事件目标。

Answer 3

您的第二个条件永远不会运行，因为第一个条件始终为真。您正在检查DOM中是否存在ID等于clickable1的元素。这总是如此。这就是为什么它永远不会进入其他地方

您可以做的是检查点击的元素ID。像

这样的东西

＆＃13;

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(event){
  if(event.target.id === "clickable1"){
    document.getElementById("clickable1").innerHTML = text[0];
  }
    else if(event.target.id === "clickable2"){
      document.getElementById("clickable2").innerHTML = text[1];
  }
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<h1 id="clickable1"> Click me plz </h1>
<h2 id="clickable2"> Click me too plz </h2>

</head>
<body>

</body>
</html>

＆＃13;

Javascript - addEventListener if else条件不起作用

3 个答案: