javascript - 我需要将一个函数设置为 html 元素的事件监听器

Question

我有这个 html 代码

<div class = "select">

      <select class = "select-text">
        <option disabled selected> Select user </option>
      </select>

</div>

<button id = "oracle" class = "mdc-button"> Calculate BMI </button>

而这个js代码

const displaySelectedUser = () => {};     
const letsCalculateBMI = () => {};     
const powerupTheUI = () => {};

powerupTheUI在我要的函数中仅使用 DOM 选择器

1. 设置为html 中 div 选择类displaySelectedUser的更改eventlistener

2. 设置letsCalculateBMI为#oracle按钮的单击事件侦听器

我试过了

document.querySelector(".select").addEventListener("change", displaySelectedUser());     
document.querySelector("#oracle").addEventListener("click", letsCalculateBMI());

和

let oracle = document.querySelector("#oracle");

oracle.addEventListener("click", () => {
    letsCalculateBMI();
});

但是测试程序不会接受它

标签： javascripthtmldomaddeventlistenerdom-events

Answer 1

您正在调用从函数返回值的函数。只是不要调用该函数。

document.querySelector(".select").addEventListener("change", displaySelectedUser);
document.querySelector("#oracle").addEventListener("click", letsCalculateBMI);

注意：this如果您使用箭头函数，您将无法访问通过在事件处理程序中单击/更改的元素