I have a problem using the property .src, I'm meant to use it to change images on every load of the html page using random generated numbers. And for some reason, the img.src doesn't change the src property of the targeted id and stop my loop "for" for some reasons... (The code is run on a separate file form HTML) Here is the js code :
const images_for_you = [
'./assets/Series/Aggretsuko.jpg',
'./assets/Series/AngelBeast.jpg',
'./assets/Series/Arcane.jpg',
'./assets/Series/BreakingBad.jpg',
'./assets/Series/BlackMirror.jpg',
'./assets/Series/BluePeriod.jpg',
'./assets/Series/Django.png',
'./assets/Series/GreatPretender.jpg',
'./assets/Series/Hilda.jpg',
'./assets/Series/JeVeuxMangerTonPancreas.jpg',
'./assets/Series/LaLigneVerte.jpg',
'./assets/Series/LeCupheadShow.jpg',
'./assets/Series/LesEnfantsDeLaBalaine.jpg',
'./assets/Series/LeVoyageTeChihiro.jpg',
'./assets/Series/QuoiQuilArriveJeVousAime.jpg',
'./assets/Series/NosMotsCommeDesBulles.jpg',
'./assets/Series/SkyHighSurvival.jpg',
'./assets/Series/toradora.jpg',
'./assets/Series/SkyHighSurvival.jpg',
'./assets/Series/Viking.jpg']; // 20
const images_japanese_animation = [];
const images_netflix_originals = [];
const images_films_sf = [];
const images_studios_ghibli = [];
const images_dessins_animes = [];
function random_array(iterations){
var randomArray = [];
for (let i = 0; i<iterations; i++){
randomArray.push(Math.floor(Math.random()*iterations))
}
return randomArray
}
function attribute_for_you(number_of_images){
let randArr = random_array(number_of_images)
let index_for_you = [
'for_you_1',
'for_you_2',
'for_you_3',
'for_you_4',
'for_you_5',
'for_you_6',
'for_you_7',
'for_you_8',
'for_you_9',
'for_you_10',
'for_you_11',
'for_you_12',
'for_you_13',
'for_you_14'
]
for (let i = 0; i < number_of_images; i++){
console.log(images_for_you[randArr[i]])
console.log(randArr[i])
console.log(i)
var img_index = document.getElementsById(index_for_you[i])
img_index.src = images_for_you[randArr[i]]
}
}
attribute_for_you(10)
Thanks for your help Also, the ids are correct, i checked it multiple times :)
var img_index = document.getElementsById(index_for_you[i])
getElementById is use to get the html elements with specific id but you are using this to get your JS variable, that's not how it works so it will show error.
UPDATED
You also need to add those image elements to your HTML body if they are not in your HTML
for (let i = 0; i < number_of_images; i++){
console.log(images_for_you[randArr[i]])
console.log(randArr[i])
console.log(i)
var img_index = document.getElementById(index_for_you[i])
//if cannot find that image element, we need to add it
if(!img_index) {
imageElement = document.createElement('img');
imageElement.setAttribute("id", index_for_you[i]);
//add the image element to the body
document.body.appendChild(imageElement);
}
img_index = document.getElementById(index_for_you[i])
img_index.src = images_for_you[randArr[i]]
}
OLD ANSWER
You have syntax error here
var img_index = document.getElementsById(index_for_you[i])
It should be getElementById, not getElementsById (Elements should not have s)
The change should be
var img_index = document.getElementById(index_for_you[i])