javascript - 为什么我的下面的 IIFE 代码只能与 clickEvent 一起工作一次

Question

下面是我今天想到并创建的一个小项目的链接。我无法使用 IIFE 让按钮多次工作。我已经在没有 IIFE 的情况下解决了这个问题，但我的理解是最好将代码设为私有(private)...任何建议将不胜感激。

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();

})();

Answer 1

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

如果您希望它再次运行并生成新颜色，

randomColor 应该是一个函数(而不是对 IIFE 返回值的引用)。如果您愿意，您可以使用 IIFE 来包装整个事物的范围，如果您不希望它出现在全局范围内，则可以将 randomColor 放入某种范围内。

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