JavaScript数组推送异常、data-flag赋值错误及图片src字段提取问题

• getFlag被重复调用：init方法中已经执行过一次getFlag生成12个flag元素，generateQuestions中再次调用该方法，会额外生成12个重复元素，且方法最终返回的是最后一次循环生成的i=12的flag元素，因此你拿到的flagId固定为12，循环插入12次相同值就会出现数组全为12的问题。
• src提取逻辑错误：slice方法仅支持传入数值索引，传入字符串'gif'会被转为NaN，无法完成截取需求。
  注：你描述的所有flag的data-flag都被设为12的问题，在你提供的代码中不存在，同步循环中给元素赋值data-flag时会取当时的i值，生成的元素属性会依次为1-12，该错觉大概率是重复调用生成重复元素导致的。

1. 调整getFlag逻辑，仅调用一次，返回所有生成的flag元素集合，避免重复生成DOM。
2. 遍历flag元素集合，逐个取data-flag属性存入gQuestions数组即可解决值重复的问题。
3. src提取可通过字符串拆分实现：先拆分路径拿到文件名，再按横杠和后缀拆分即可拿到目标单词，示例如下：

// 以src为img/1-smile.gif为例
const fileName = flag.src.split('/').pop() // 得到1-smile.gif
const targetWord = fileName.split('-')[1].split('.')[0] // 得到smile

JS部分 #

'use strict';

var gBgEyesShift = false;
var gQuestions = [];
var gFlagsDiv;
// 存储所有生成的flag元素
var gFlagList = [];

function init() {
    // bgEyesMovement(); 你原代码中未提供该方法实现，可自行放开
    // 仅调用一次getFlag生成元素并存储
    gFlagList = getFlag();
    generateQuestions();
}

function generateQuestions() {
    // 遍历所有flag元素存入数组
    for (var i = 0; i < gFlagList.length; i++) {
        const flag = gFlagList[i];
        const flagId = flag.getAttribute('data-flag');
        // 如需提取src中的单词可在此处处理
        const fileName = flag.src.split('/').pop();
        const word = fileName.split('-')[1].split('.')[0];
        gQuestions.push({id: flagId, word: word});
    }
}

function getFlag() {
    gFlagsDiv = document.querySelector('.flags');
    const flagList = [];
    for (var i = 1; i <= 12; i++) {
        const flag = new Image(150, 150);
        // 替换为你实际带横杠的文件名路径即可
        flag.src = 'img/' + i + '.gif';
        flag.setAttribute('class', 'flag');
        flag.setAttribute('data-flag', i);
        gFlagsDiv.appendChild(flag);
        flagList.push(flag);
    }
    return flagList;
}

HTML部分 #

<body onload="init()">
    <div class="flags"></div>
</body>

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