内联箭头功能单击“侦听器”

Question

这是我的html代码：

<button id ="btn-birthdate" class = "mdc-icon-button material-icons" >
    <i class="material-icons" >stop</i>
</button>

这是我的JavaScript代码

const displayExtraUserInfo  = (userInfo) => {
    const btn = () => {
        document.querySelector('btn-birthdate').onclick = displayBirthdate(UserInfo);
    }
}

，但我一直收到消息

您尚未为btn-birthdate创建onclick侦听器 指定

...当我在sapio

中运行时

问题正在尝试解决

创建displayExtraUserInfo箭头功能。它应采用一个参数。然后应该：

添加一个内联箭头函数，单击带有btn-birthdate ID的按钮。听众应呼叫displayBirthdate并通过收到的参数displayExtraUserInfo

Answer 1

在onclick分配中，您当前正在执行 displayBirthdate，而不是分配函数。

所以更改

.onclick = displayBirthdate(UserInfo)

to：

.onclick = () => displayBirthdate(UserInfo)

另一方面，在定义它之后，您永远不会调用btn功能。添加呼叫btn()，或者只是根本不定义该功能，而只需执行其代码即可。

选择器也存在问题。您正在选择标签名称为 btn-birthdate的元素，但是您应该通过ID选择。#btn-birthdate。

还有另一个错误：userInfo的拼写应该是一致的，否则您正在处理另一个变量。

，最终解决方案将是：

const displayExtraUserInfo = (userInfo) => {
    document.querySelector('#btn-birthdate').onclick = () => displayBirthdate(userInfo);
}

最后，问题说您正在寻找按钮。尽管元素ID应该是唯一的，但您可以在选择器中添加button：

const displayExtraUserInfo = (userInfo) => {
    document.querySelector('button#btn-birthdate').onclick = () => displayBirthdate(userInfo);
}

Answer 2

querySelector方法使用CSS选择器格式化，因此querySelector('btn-birthdate')不会找到任何东西。您需要querySelector('#btn-birthdate')来定位ID" BTN-BIRTHDATE"。

您也可以使用document.getElementById("btn-birthdate")

Answer 3

这对我有用

const displayExtraUserInfo = (userInfo) => {
        document.getElementById('btn-birthdate').addEventListener('click',()=>{
          displayBirthdate(userInfo)
        } );