'Impossible to change the src attribute using img.src

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 :)

javascripthtmlsrc


Solution 1:[1]

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])

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Alucard

Related Questions