如何实现页面加载时自动显示随机动物并同步保存记录？

核心修改思路 #

把生成、保存、显示动物的逻辑抽成可复用函数，页面加载时直接调用该函数，既实现初始显示，又自动把首个记录存入saveData，无需额外编写单独的保存代码。同时修正原代码中的变量混淆、拼写错误等问题。

修改后的完整代码 #

HTML部分（无需改动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
    <title></title>
</head>
<body>
    <section>
        <div class="animals" id="animals"></div>
    </section>

    <script src="script.js" defer></script>
</body>
</html>

JavaScript部分

const showAnimal = () => {
    const animals = {"dog": "yellow", "cat":"black", "fish":"blue","mouse":"gray"};
    // 纠正变量名：Object.keys是动物名称，Object.values是对应颜色
    const animalNames = Object.keys(animals);
    const colors = Object.values(animals);

    const numOfAnimals = 15; 
    let num = 0;    
    const saveData = [];

    const selectRandomFeature = () => {
        const randomNameIndex = Math.floor(Math.random() * animalNames.length);   
        const randomColorIndex = Math.floor(Math.random() * colors.length); 

        const randomName = animalNames[randomNameIndex];  
        const randomColor = colors[randomColorIndex];

        return [randomName, randomColor, randomNameIndex, randomColorIndex];
    }

    const displayAnimals = (randomName, randomColor) => {
        if (num < numOfAnimals) {        
            document.getElementById("animals").innerText = randomName;   
            document.getElementById("animals").style.color = randomColor;
            console.log(`动物：${randomName}，颜色：${randomColor}`);
        } else {
            console.log("所有记录：", saveData);
        }
    }

    // 抽取复用逻辑，统一处理生成、保存、显示
    const updateAnimal = (direction) => {
        const [randomName, randomColor] = selectRandomFeature();
        
        saveData.push({
            "text": randomName, 
            "color": randomColor, 
            "direction": direction
        });
        
        displayAnimals(randomName, randomColor);
        num++;
    }

    // 页面加载完成自动生成首个动物并保存记录
    updateAnimal("initial");

    document.addEventListener('keydown', (event) => {
        if (num >= numOfAnimals) return; // 达到次数后不再响应按键

        if (event.key === 'r') {            
            updateAnimal("left");
        } else if (event.key === 't') { 
            updateAnimal("right"); // 修复拼写错误：righ → right
        }        
    });
}  
showAnimal();

关键修改点说明 #

1. 纠正变量混淆：原代码中colors和name的定义颠倒，改为animalNames和colors，逻辑更清晰。
2. 复用逻辑封装：把按键事件里的生成、保存、显示逻辑抽成updateAnimal函数，页面加载时直接调用该函数，自然完成首个记录的保存。
3. 修复拼写错误：将t键对应的"righ"改为正确的"right"。
4. 简化冗余判断：原代码中索引相等与否的分支逻辑完全重复，直接合并为一次push操作。
5. 调整次数限制：原条件num < numOfAnimals -1限制最多显示14次，改为num < numOfAnimals后可完整显示15次。

内容的提问来源于stack exchange，提问作者Pisa Ponente