为什么我的按钮要点击两次才能切换一个功能？JavaScript

// 错误示例
document.getElementById('myButton').addEventListener('click', function() {
    // 功能代码
});

// 正确示例
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('myButton').addEventListener('click', function() {
        // 功能代码
    });
});

let isActive = false;

document.getElementById('myButton').addEventListener('click', function() {
    isActive = !isActive;
    if (isActive) {
        // 激活功能的代码
    } else {
        // 停用功能的代码
    }
});

// 防抖函数示例
function debounce(func, wait) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

document.getElementById('myButton').addEventListener('click', debounce(function() {
    // 功能代码
}, 300));

/* 错误示例 */
#myButton {
    pointer-events: none;
}

/* 正确示例 */
#myButton {
    pointer-events: auto;
}

document.getElementById('myButton').addEventListener('click', function() {
    // 异步操作示例
    fetch('/api/data')
        .then(response => response.json())
        .then(data => {
            // 根据数据更新状态
        })
        .catch(error => console.error('Error:', error));
});