애드 이벤트 에러

<nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <span class="navbar-brand">JSShop</span>
            <span class="badge bg-dark">Dark 🔄</span>
            <button class="navbar-toggler" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>

        
        </div>
    </nav>

<script>
var count=0;

document.getElementById('badge').addEventListener('click', function(){
count++;
console.log(count);
});
</script>

이렇게 했는데 
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

이런 에러가 뜨네요

$('.badge').on('click', function(){
            count++;
            console.log(count);
})

제이쿼리는 잘 작동합니다 뭐가 문제인가요?