javascript - 为什么上下文没有传递给事件监听器

Question

目前我正在做一个简单的应用程序，我只是访问 dom 并添加一些事件监听器，问题是，我有一个应用于 3 个按钮的类，我想添加事件监听器到其中 3 个，但我想重用一个函数来显示和隐藏模态。

基本上，当我点击其中一个应用了类的按钮时，我想显示模式

所以我这样做了:

var showBackdrop = document.querySelector('.backdrop');
var showModal = document.querySelector('.modal');
var confirmationNo = document.querySelector('.modal__confirmation--no')

var planChoices = document.querySelectorAll('.plan__choice');

function showModal() {
    showBackdrop.style.display = 'block';
    showModal.style.display = 'block';
}

function hideModal() {
    showBackdrop.style.display = 'none';
    showModal.style.display = 'none';
}

var ctx = this;
for(planChoice of planChoices) {
    console.log(ctx);
    planChoice.addEventListener('click', function() {

    });
}

confirmationNo.addEventListener('click',function() {
    hideModal();
})

问题是找不到 showModal 函数，错误显示，showModal 不是一个函数，为什么？ :S

Answer 1

您在同一执行上下文中对函数和变量使用了相同的名称 showModal，这可能是问题所在。