I'm trying to have the same data I've set in a function - in a different function as an object key in an array and it keeps pushing the same number (12). Also, I'm trying to get a specific word from the src of an image within a loop. How can I make the src a temporary string? (the console.log line)
Edit following a comment to make it more clear: Currently, the flag.setAttribute('data-flag', i); line sets the data-flag of ALL the 12 flags to 12, while I want to set them individually (data-flag 1 for flag 1, data-flag2 for flag 2 and so on). Another problem: I want to slice a specific word from the src of the images within a loop (for example, if images srcs are 1-smile.gif, 2-frown.gif, 3-laugh.gif, I want to slice the word following the dash in the src of each image, using the loop, and then storing it in a variable).
Would very much appreciate your help.
'use strict';
var gBgEyesShift = false;
var gQuestions = [];
var gFlagsDiv;
function init() {
bgEyesMovement();
getFlag();
generateQuestions();
}
function generateQuestions() {
var flagId = getFlag().getAttribute('data-flag');
for (var i = 0; i < 12; i++) {
gQuestions.push({id: flagId});
}
}
function getFlag(flag) {
gFlagsDiv = document.querySelector('.flags');
for (var i = 1; i <= 12; i++) {
flag = new Image(150, 150);
flag.src = 'img/' + i + '.gif';
flag.setAttribute('class', 'flag');
flag.setAttribute('data-flag', i);
gFlagsDiv.appendChild(flag);
}
console.log(flag.src.toString().slice('gif'));
return flag;
}
<body onload="init()">
<div class="flags">
</div>