我需要將一個函數設置為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. 將displaySelectedUser設置為html中div選擇類的更改事件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();
});

但是測試程序不會接受

Answer 1

您正在調用要返回的函數。 只是不要調用該函數。

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

注意：如果您使用的是箭頭功能，則將無法在事件處理程序中使用this元素來訪問單擊/更改的元素。