javascript - 为什么我的以下LIFE代码只能与click事件一起使用一次

以下是我今天想到并创建的一个小项目的链接。我不能使用IIFE来使按钮多次工作。.我已经找到了没有IIFE的按钮，但是我的理解是最好将代码设为私有...任何建议将不胜感激。

https://codepen.io/kclute627/pen/dgPyxq

let randomColor = (function(){

// generate a random number
let randNum= () => Math.floor(Math.random() * 10);
// invoke random number 6 times to create hexcolor
let randColor = parseInt([randNum(), randNum(), randNum(), randNum(),
randNum(), randNum()].join(''))

const hexColor = (`#${randColor}`)

return hexColor;

})();

const makeColor = (function() {
let color1 = randomColor;
console.log(color1);
let setupEventListener = function(){

    document.querySelector('.final-button').addEventListener('click',
function(){
        document.querySelector('.main-box').style.backgroundColor = color1;
    });
};

setupEventListener();

})();

最佳答案

第一次加载文件时，randomColor仅分配一次。 let color1 = randomColor;只是获取randomColor的值，它不会再次运行IIFE来获得新的颜色。

如果希望再次运行randomColor并生成新的颜色，它应该是一个函数（而不是对IIFE返回值的引用）。如果需要，您可以使用IIFE将全部内容包装起来，如果不希望将randomColor放在某种范围内，则可以将其放在全局范围内。

值得注意的是，每次单击时，单击处理程序都在运行，但是颜色没有更改，因为randomColor不变。