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选择器

将displaySelectedUser设置为html中div选择类的更改eventlistener
将letsCalculateBMI设置为#oracle按钮的点击事件侦听器

我尝试过

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

还有

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

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

但是测试程序不会接受

Answer 1

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

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

注意：如果您使用的是箭头功能，则无法在事件处理程序中使用this访问单击/更改的元素

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

1 个答案: