如何在不同对象中显示数组单个值？JS调色板生成器取值异常问题

问题根源 #

你把listaHex数组的初始化代码写在了for循环内部，每次循环都会创建一个新的空数组覆盖之前的变量，三次循环结束后，listaHex里只会有最后一次循环添加的1个颜色值，自然只有索引0的元素能正常读取，索引1、2都是undefined所以不显示。

修复方案 #

把数组初始化和变量声明移到for循环外部即可，修改后的JS代码如下：

var botaogerar = document.getElementById("botao-gerar");

var cores = ['#CF2F2F', '#CF2FB2', '#732FCF', '#2F40CF', '#2FCFCA', '#36CF2F', '#CFC02F', '#F97D00', '#6F4535', '#787878', '#202020', '#009BDF'];

botaogerar.addEventListener("click", function(){
    // 数组初始化移到循环外部
    var listaHex = [];
    // 循环变量主动声明，避免成为全局变量
    for (let i = 0; i < 3 ; i++){
        var indiceArray = escolheCorNoArray();
        var codhex = cores[indiceArray];
        listaHex.push(codhex);
    }

    document.getElementById("hex-grupo-a-1").textContent = listaHex[0];
    document.getElementById("hex-grupo-a-2").textContent = listaHex[1];
    document.getElementById("hex-grupo-a-3").textContent = listaHex[2];
    
    // 额外补充：可直接给色块设置对应背景色
    document.getElementById("amostra1").style.backgroundColor = listaHex[0];
    document.getElementById("amostra2").style.backgroundColor = listaHex[1];
    document.getElementById("amostra3").style.backgroundColor = listaHex[2];
});


function escolheCorNoArray(){
    return Math.floor(Math.random()*cores.length);
}

如果需要避免生成的三个颜色重复，只需要在push前加个判断，选到已存在的颜色就重新生成即可。

内容的提问来源于stack exchange，提问作者Gabriel Eduardo