时间戳

首页 > 解决方案 > 内联箭头函数点击监听器

javascript - 内联箭头函数点击监听器

问题描述

这是我的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);
    }
}

但我不断收到消息

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

...当我在萨皮奥跑步时

我试图解决的问题

创建displayExtraUserInfo箭头函数。它应该接受一个参数。那么它应该：

将内联箭头函数单击侦听器添加到 id 为 的 BUTTON btn-birthdate。监听器应该调用displayBirthdate并传入displayExtraUserInfo接收到的参数

标签： javascriptjquery

解决方案

在onclick您当前正在立即执行 displayBirthdate的分配中，而不是分配功能。

所以改变

.onclick = displayBirthdate(UserInfo)

至：

.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);
}

推荐阅读