**New to Development** - Cannot read property 'addEventListener' of null [duplicate]

This question already has an answer here:

• Why does jQuery or a DOM method such as getElementById not find the element? 6 answers

I'm trying to make a dice roll app, where a random value between 1-6 is stored into a variable on click. The app would then check the variable's value and target a hidden class, making it visable.

I get the error of "Cannot read property 'addEventListener' of null" when executing the following code:

const randButton = document.getElementById('diceRoll');

randButton.addEventListener('click', () => {
    var randomNumber = Math.floor( Math.random() * 6) + 1;
    if (randomNumber == 1) {
    let i = document.getElementsByClassName('one');
    i.style.display = 'block';
    } if (randomNumber == 2) {
    let i = document.getElementsByClassName('two');
    i.style.display = 'block';
    } if (randomNumber == 3) {
    let i = document.getElementsByClassName('three');
    i.style.display = 'block';
    } if (randomNumber == 4) {
    let i = document.getElementsByClassName('four');
    i.style.display = 'block';
    } if (randomNumber == 5) {
    let i = document.getElementsByClassName('five');
    i.style.display = 'block';
    } if (randomNumber == 6) {
    let i = document.getElementsByClassName('six');
    i.style.display = 'block';
    }
});

The error isn't in selecting the Id, as the html is simply:

<button id="diceRoll">Roll</button>