函数运行而不等待事件监听器

Question

我有一个非常基本的js功能的问题。我环顾四周，在SO上发现this主题非常相似，但对我没有帮助。

所以我想在点击div之后运行一个函数。我的第一次尝试会导致函数在没有单击的情况下运行：

第一次尝试

document.getElementsByClassName('button').addEventListener("click", slide());

function slide(){
  x = document.getElementsByClassName('button')[0];
  x.innerHTML = "test123";
}

.button{
  height:60px;
  background-color:darkred;
}

<div class="button" id="button"></div>

然后在将我的代码调整到我在上面链接的主题中提供的答案后，我创建了类似的内容：

第二次尝试

document.getElementsByClassName('button').addEventListener("click", function(){
	slide();
});

function slide(){
  x = document.getElementsByClassName('button')[0];
  x.innerHTML = "test123";
}

.button{
  height:60px;
  background-color:darkred;
}

<div class="button" id="button"></div>

但点击div后根本没有任何反应。我也试过这样做：

document.getElementsByClassName('button').addEventListener("click", slide);

但是也没有任何反应。有人能解释一下我做错了什么吗？提前谢谢。

Answer 1

您必须在代码中出现问题：

1. 您不应在addEventListener。
中执行此功能
2. getElementsByClassName返回集合。因此，在使用getElementsByClassName时必须使用正确的索引。

document.getElementsByClassName('button')[0].addEventListener("click", slide);

function slide(){
  x = document.getElementsByClassName('button')[0];
  x.innerHTML = "test123";
}

.button{
  height:60px;
  background-color:darkred;
}

<div class="button" id="button"></div>