为什么我的代码中函数的调用位置很重要？

Question

The only difference between the two codes is where I call the "de ()" function. I left the codepen links below to understand exactly what the problem is. The problem is that when I click the button in the faulty code, it gives me the same color, not the different color, but if I run the function as in the correct code, it gives a different color when I click on each button. I searched on the internet but couldn't find an answer. Why is this happening? it's working code: https://codepen.io/BerkayAkgurgen/pen/wvoKPGM it's problem code: https://codepen.io/BerkayAkgurgen/pen/rNWOYep

// it's working code
eventListener();

function de() {
    const denemeArray = ["#f2f", "#000000", "#ff0"];
    let be = Math.floor(Math.random() * denemeArray.length);
    return denemeArray[be];
}

function eventListener() {
    document.getElementById("deneme").addEventListener("click", function () {
        const choice = de();
        de();
        document.body.style.backgroundColor = choice;
    });
}

// it's problem code
eventListener();

function de() {
    const denemeArray = ["#f2f", "#000000", "#ff0"];
    let be = Math.floor(Math.random() * denemeArray.length);
    return denemeArray[be];
}

function eventListener() {
    const choice = de();
    document.getElementById("deneme").addEventListener("click", function () {
        de();
        document.body.style.backgroundColor = choice;
    });
}

Answer 1

In the problem code, the value to variable 'choice' is set only once. The function de() is called on every click, but the return value is not used.

function setEventListener() {
const ORIGINAL_COLOR = de();
document.getElementById("deneme").addEventListener("click", function actualEventListener() {
    const THIS_COLOR_IS_NEVER_USED = de();
    document.body.style.backgroundColor = ORIGINAL_COLOR;
});
}